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.

Esto es todo, espero que te sirva este ejercicio y gracias por visitar este sitio, te dejo el demo y los archivos del tutorial para que lo uses en tus proyectos. Nos vemos!!.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

2 Respuestas

  1. GeanCarlos dice:

    Buen aporte amigo.. sigue asi.

  1. enero 30, 2014

    Buen aporte amigo.. sigue asi.