Tabla de Precios con CSS3

Tabla de Precios con CSS3

Descripción:
En este tutorial vamos a aprender a crear con estilo CSS3 algunas tablas de precios de la interfaz de usuario impresionista,espero les sirva para sus proyectos personales.

Paso 1 - HTML
Vamos a crear una tabla con la clase "pricing-table", esta clase será la base para agregar nuestro estilo. A continuación, vamos a dividir nuestras tablas de precios en tres partes: la primera, <thead>, tendrá el título del plan y el precio correspondiente, el segundo, <tbody>, tendrá las características del plan (por ejemplo: ancho de banda, espacio en disco, etc), y por último el tercero, <tfoot>, será el pie de página con una descripción de texto.

<table class="pricing-table">
    <thead>
<tr class="plan">
            <td class="green">
                <h2>
Básico</h2>
<i>Ideal para pequeñas empresas</i>
            </td>
            <td class="orange">
                <h2>
Profesional</h2>
<i>Ideal para Medianas empresas</i>
            </td>
            <td class="green">
                <h2>
Corporativo</h2>
<i>Ideal para Grandes empresas</i>
            </td>
        </tr>
<tr class="price">
            <td class="green">
                <p>
<span>$</span>5</p>
<span>monthly</span>
                <a href="#">Join</a>
            </td>
            <td class="orange">
                <p>
<span>$</span>9<span>79</span></p>
<span>monthly</span>
                <a href="#">Join</a>
            </td>
            <td class="green">
                <p>
<span>$</span>12</p>
<span>monthly</span>
                <a href="#">Join</a>
            </td>
        </tr>
</thead>
 
    <tbody>
<tr class="clock-icon">
            <td>No Soporte</td>
            <td>24/7 Soporte Técnico </td>
            <td>24/7 Soporte Técnico </td>
        </tr>
<tr class="basket-icon">
            <td>Obsiones Básicas</td>
            <td>Opciones avanzadas</td>
            <td>Opciones avanzadas</td>
        </tr>
<tr class="star-icon">
            <td>100GB Almacenamiento</td>
            <td>200GB Almacenamiento</td>
            <td>500GB Almacenamiento</td>
        </tr>
<tr class="heart-icon">
            <td>1TB Ancho de Banda</td>
            <td>2TB Ancho de Banda</td>
            <td>5TB Ancho de Banda</td>
        </tr>
</tbody>
 
    <tfoot>
<tr>
            <td><b>Softaculous</b> es un gran instalador automático que tiene 270 grandes guiones, 1000 Clases de PHP y seguimos agregando más.</td>
            <td><b>Softaculous</b> es un gran instalador automático que tiene 270 grandes guiones, 1000 Clases de PHP y seguimos agregando más.</td>
            <td><b>Softaculous</b> es un gran instalador automático que tiene 270 grandes guiones, 1000 Clases de PHP y seguimos agregando más</td>
        </tr>
</tfoot>
</table>

Paso 2 - CSS básico
Antes de iniciar el estilo de la tabla de precios, vamos a añadir un archivo de restablecimiento CSS para reducir inconsistencias de navegación en cosas como la altura de la línea por defecto, los márgenes y tamaños de fuente de las partidas, etc El archivo de reinicio CSS que vamos a utilizar es esta, hecha por Eric Meyer.

A continuación, vamos a definir el ancho de las tablas de precios. Como vamos a utilizar tres columnas, la anchura será de 670px, pero si va a utilizar más o menos de tres columnas que tendrá que aumentar o disminuir el valor de anchura. También nos fijaremos algunos estilos básicos de las columnas de la tabla. Para agregar el margen entre las mesas que tenemos que establecer el <td> a "display: inline-block;", mediante el establecimiento de esta propiedad algunos errores pueden aparecer en función del contenido de la tabla, por lo que si no desea que las columnas separación puede quitar la propiedad de presentación.

Paso 3 - Plan de la Sección
Para la sección del plan vamos a configurar el ancho (este valor de ancho se utiliza también en las siguientes secciones), la altura, añadir un poco de relleno y esquinas redondeadas mediante la propiedad "border-radius". A continuación, vamos a añadir los estilos de tipografía (familia de fuente, tamaño, altura de línea, etc) para el título del plan y la pequeña descripción.

También tenemos dos combinaciones de colores diferentes, verde y naranja. Para cada combinación de colores vamos a definir un color, text-shadow diferente y una imagen fondo.

Paso 4 - Artículo Precio
La sección de los precios es el más difícil, porque tenemos un montón de detalles aquí. Para empezar vamos a configurar el mismo valor de la anchura como la sección del plan, agregar un degradado CSS3 luz, algunos estilos de tipografía, etc.

.pricing-table thead .price td {
    position: relative;
    width: 210px;
    padding: 25px 0;
 
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #b6b07c;
 
    background: #f9f8f1;
    background: -moz-linear-gradient(top,  #f9f8f1 0%, #f4f2e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2));
    background: -webkit-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
    background: -o-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
    background: -ms-linear-gradient(top,  #f9f8f1 0%,#f4f2e2 100%);
    background: linear-gradient(to bottom,  #f9f8f1 0%,#f4f2e2 100%);
}
 
.pricing-table thead .price p {
    display: table;
    margin: 0 auto;
    font-size: 50px;
    line-height: 60px;
}
 
.pricing-table thead .price p span {
    font-size: 0.5em;
    display: table-cell;
    vertical-align: middle;
}
 
.pricing-table thead .price span { font-size: 14px; }

Para el botón "Join" vamos a colocarlo 41px de arriba y 5px a la derecha, agregar los rellenos, tamaño de fuente, etc Como lo hicimos en la sección del plan también es necesario establecer diferentes colores y degradados para el verde y esquemas de color naranja.

.pricing-table thead .price a {
    display: block;
    position: absolute;
    top: 41px;
    right: -5px;
    height: 32px;
    padding: 0 10px;
    line-height: 32px;
    font-size: 12px;
    text-decoration: none;
}
 
.pricing-table thead .price .green a {
    color: #37621f;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
 
    background: #82d344;
    background: -moz-linear-gradient(top,  #82d344 0%, #51af34 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34));
    background: -webkit-linear-gradient(top,  #82d344 0%,#51af34 100%);
    background: -o-linear-gradient(top,  #82d344 0%,#51af34 100%);
    background: -ms-linear-gradient(top,  #82d344 0%,#51af34 100%);
    background: linear-gradient(to bottom,  #82d344 0%,#51af34 100%);
}
 
.pricing-table thead .price .orange a {
    color: #fafafa;
    text-shadow: 1px 1px 2px rgba(0,0,0, .3);
 
    background: #ff8042;
    background: -moz-linear-gradient(top,  #ff8042 0%, #f55a0e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8042), color-stop(100%,#f55a0e));
    background: -webkit-linear-gradient(top,  #ff8042 0%,#f55a0e 100%);
    background: -o-linear-gradient(top,  #ff8042 0%,#f55a0e 100%);
    background: -ms-linear-gradient(top,  #ff8042 0%,#f55a0e 100%);
    background: linear-gradient(to bottom,  #ff8042 0%,#f55a0e 100%);
}

Para agregar las "two triangles" y la "small arrow”" para hacer que el botón, como una "bandera" vamos a utilizar: before y: after pseudo-selectores. Estos dos selectores nos permite insertar contenidos antes y después del elemento, así que no es necesario añadir dos etiquetas adicionales en el html. La pequeña flecha a la derecha del botón se añadirá utilizando una técnica de frontera inteligente. Mediante la combinación de todas las fronteras con diferentes colores para cada uno, podemos crear formas personalizadas, como triángulos, para más información sobre esta técnica podemos echar un vistazo a este sitio web.

Paso 5 - Sección Funciones
Vamos a empezar con la "banda" en la parte superior de esta sección, lo añadiremos con el: antes selector. A continuación, vamos a establecer la anchura (nótese que aquí el ancho no es 210px porque tenemos algo de relleno a la izquierda), en el borde superior y algunos estilos de tipografía.

Para los iconos tenemos una clase personalizada para cada uno, y sólo tenemos que colocar la imagen de fondo para cada clase.

Paso 6 - Sección de descripción
La sección de descripción es sólo texto simple. Como de costumbre, vamos a definir el ancho, rellenos, color de fondo, alinear el texto al centro, etc Este es el final de nuestra columna de la tabla y vamos a añadir una sombra y esquinas redondeadas con CSS3.

Este es el final de este tutorial. Espero que les sea útil y haya aprendido algo nuevo de ella. Siéntase libre de utilizar estos cuadros de precios para su próximo proyecto o sitio web personal. No te olvides de seguirnos para más artículos, tutoriales y recursos de calidad. Disfrute!

BUSCADOR

CATEGORÍAS

Aprende a como descargar

27 junio 2013

Tabla de Precios con CSS3

No hay comentarios:

Publicar un comentario

Post Top Ad

CATEGORÍAS DESTACADAS

SÍGUENOS EN FACEBOOK

TELEGRAM

RECIBE NUESTROS POST

ENTRADAS POPULARES