En este tutorial vamos a hacer una Tabla de precios con CSS3 y HTML, utilizaremos el poder de CSS3 por medio de las transiciones y transformaciones para lograr un aspecto sencillo pero a su vez profesional.
Este tipo de tablas hoy día juegan un papel importante en empresas que ofrecen variedades de productos a diferentes precios, antes se solía utilizar tablas para realizar este trabajo, aunque no estaría mal ya que estamos tabulando información con los divs y elementos de lista podemos realizar esto de excelente manera, y hablando del punto de vista de diseño y usabilidad no estaría nada mal.
La idea de este tutorial es hacer una tabla de precios sofisticada con HTML y CSS fácil para utilizar.
Esto es lo que vamos a lograr en este tutorial.
Bueno, sin tanto blablablá.. empecemos.
EL HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div id="contenedor">
<div id="tabla-precios">
<div class="columnas">
<ul>
<li><strong>Selecciona tu Plan</strong></li>
<li class="cabeza">
<h2>Plan 1</h2>
<span>$10 / mes</span>
</li>
<li>100MB de Capacidad</li>
<li>1GB de Transferencia</li>
<li>Configuración gratuita</li>
<li>1 Cuenta FTP</li>
<li>1 Cuenta Email</li>
<li>1 Base de Datos</li>
<li>Dominio</li>
<li class="pie">
<a href="#" class="boton">Seleccionar</a>
</li>
</ul>
</div>
</div>
</div>
|
Bueno, en el HTML tenemos un div contenedor general <div id=”contenedor”> dentro de el el contendor de toda la tabla <div id=”tabla-precios”> y dentro tenemos las columnas de los productos o precios, en el HTML anterior solo hay una columna pero esta la copiamos y pegamos hasta obtener 4, dentro del <div class=”columnas”> tenemos una <ul> y dentro sus respectivos <li> que es lo que contendrá todos los ítems del producto.
Como tenemos diferentes estilos para los <li> aplicamos clases diferentes a algunos de ellos, el <li class=”cabeza”> que contendrá el titulo del plan y precio y el <li class=”pie”> para los estilos del pie de la columna.
Hasta ahora no tenemos nada atractivo visualmente, solo tenemos la estructura básica HTML, faltan los estilos CSS que incluiremos a continuación.
CSS
1 – los estilos del contenedor.
|
|
#contenedor {
width: 900px;
margin: 80px auto;
}
|
2 – Estilos para el div contenedor directo de la tabla de precios
|
|
#tabla-precios {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
font-size: 12px;
color: #787878;
width: 100%;
}
|
3 – Estilos para las columnas de información.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
/*========COLUMNAS=========*/
.columnas {
float: left;
margin: 1px;
width: 24%;
text-align: center;
position: relative;
}
.columnas ul {
border-bottom: 10px solid #222222;
list-style-type: none;
position: relative;
}
.columnas ul li {
background: #e6e6e6;
border-bottom: 1px solid #b6b6b6;
border-right: 1px solid #b6b6b6;
padding: 1em .3em;
color: #000000;
position: relative;
}
.columnas li:after {
color: #7a8e16;
content: '•';
font-size: 25px;
left: 8px;
top: 2px;
position: absolute;
}
.columnas ul li:first-child {
background: #222222;
color: #ffffff;
padding: .5em .3em .8em;
font-size: 13px;
font-weight: bold;
}
.columnas:first-child ul {
border-left: 1px solid #b6b6b6;
}
.columnas ul li:first-child:after {
display: none;
}
.columnas li:first-child {
border-right: 1px solid transparent;
}
|
Las flotamos a la izquierda cada columna, le damos dimensiones y la posicionamos y le damos 1px de margen. Luego aplicamos los estilos a la lista y a cada elemento <li>, como background, bordes, color, padding, tamaños y por medio de el pseudo-elemento li:after aplicamos la viñeta a los ítems de la tabla, después aplicamos un fondo oscuro al primer hijo<li> de la lista por medio de first-child y le damos estilos diferentes, también a ese ítem le hacemos desaparecer la viñeta y los bordes que no necesitamos.
4 – Estilos a los <li> titulos
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
.columnas .cabeza {
background: #77948d; /* Old browsers */
background: -moz-linear-gradient(top, #77948d 0%, #46635d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#77948d), color-stop(100%,#46635d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #77948d 0%,#46635d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #77948d 0%,#46635d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #77948d 0%,#46635d 100%); /* IE10+ */
background: linear-gradient(to bottom, #77948d 0%,#46635d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77948d', endColorstr='#46635d',GradientType=0 ); /* IE6-9 */
display: block;
border-right: 1px solid transparent;
padding: 2em 0;
}
.cabeza h2 {
font-family: 'Allerta Stencil', sans-serif;
text-transform: uppercase;
font-size: 33px;
line-height: 1.3em;
color: #ffffff;
}
.cabeza span {
color: #ffffff;
font-size: 12px;
}
.cabeza:after {
display: none;
}
|
Como sabes los títulos están dentro de un
<li> con clase cabeza y luego hay un
<h2> y una etiqueta
<span>, pues bien aplicamos los estilos al
<li> un degradado de fondo utilizando la herramienta
colorzilla.com y formateamos el h2 con una tipografía de google fonts, color, tamaño, y las dejamos en mayúsculas, los textos del span serán mas pequeños y blanco y quitamos la viñeta que se crearon en los
<li> con display:none
5 – Estilos al pie de cada columna
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.columnas .pie {
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #b3bead 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#b3bead)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#b3bead 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#b3bead 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#b3bead 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#b3bead 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
padding: 2em 0;
}
.columnas .pie:after {
display: none;
}
.pie .boton {
background: #77948d; /* Old browsers */
background: -moz-linear-gradient(top, #77948d 0%, #46635d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#77948d), color-stop(100%,#46635d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #77948d 0%,#46635d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #77948d 0%,#46635d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #77948d 0%,#46635d 100%); /* IE10+ */
background: linear-gradient(to bottom, #77948d 0%,#46635d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77948d', endColorstr='#46635d',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0 -5px 0 #3a4845;
border-radius: 8px;
text-decoration: none;
padding: 1em 1.8em;
color: #ffffff;
position: relative;
}
|
Tanto al <li> con clase pie como al enlace con clase botón aplicamos degradados con la herramienta colorzilla, padding y otros estilos básicos y también quitamos la viñeta de este ítem o <li>.
6 – Estilos para los elementos en estado hover.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
.columnas:hover ul li.cabeza {
background: #b8cf27; /* Old browsers */
background: -moz-linear-gradient(top, #b8cf27 0%, #7a8e16 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8cf27), color-stop(100%,#7a8e16)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8cf27 0%,#7a8e16 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8cf27 0%,#7a8e16 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b8cf27 0%,#7a8e16 100%); /* IE10+ */
background: linear-gradient(to bottom, #b8cf27 0%,#7a8e16 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8cf27', endColorstr='#7a8e16',GradientType=0 ); /* IE6-9 */
}
.columnas:hover {
-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);
-o-transform: scale(1.15);
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
z-index: 5;
}
.columnas:hover ul li a.boton {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8cf27', endColorstr='#7a8e16'); /* IE5.5 - 7 */
background: -ms-linear-gradient(top, #b8cf27, #7a8e16); /* IE9 */
background: -moz-linear-gradient(top, #b8cf27, #7a8e16); /* Firefox */
background: -o-linear-gradient(top, #b8cf27, #7a8e16); /* Opera 11 */
background: -webkit-linear-gradient(top, #b8cf27, #7a8e16); /* Chrome 11 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b8cf27), color-stop(1, #7a8e16)); /* Chrome 10, Safari */
box-shadow:inset 0 -5px 0 #58600f;
}
.columnas:hover .boton:active {
box-shadow:inset 0 -1px 0 #58600f;
top: 3px;
-moz-transition: all .2ms ease-in-out;
-webkit-transition: all .2ms ease-in-out;
-o-transition: all .2ms ease-in-out;
}
|
Lo que hicimos fue cambiar los colores de la cabeza, cambiamos los degradados en la <li>cabeza y el enlace con clase botón y en estado hover de cada columna aplicamos una transformación de escala, la subimos a 1.5 y aplicamos una transición para hacer suave el cambio y con el z-index nos aseguramos que estará por encima de las demás. Y por ultimo aplicamos unos estilos al botón cuando se este activo y damos el efecto de clic gracias a la propiedad box-shadow y top.
Y listo, con esto terminamos el tutorial, claro podemos hacer muchísimas cosas mas y extender su diseño y uso, pero eso ya lo dejo a tu imaginación. Creo que con estos simples elementos llegamos a hacer esta herramienta útil para mostrar información.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario