Noticias 

Tabla de Precios con CSS3

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.
tabla-precios-css3-1
soporte-navegadores-tabla-de-precios-css3
Bueno, sin tanto blablablá.. empecemos.

EL HTML

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.
tabla-precios-css3-2
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.
2 – Estilos para el div contenedor directo de la tabla de precios
3 – Estilos para las columnas de información.
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
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
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.
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.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts