Advertisement
  1. Web Design
  2. CSS
Webdesign

Construye una Tabla de Precios Responsive con Geniales estados Hover

by
Length:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial, crearemos una tamble de precios con sorprendentes efectos de hover. Usaremos el script Prefixfree de Lea Verou para mantener nuestro CSS limpio, además haremos que todo esto sea responsive cambiando el diseño en algunos puntos.


El Marco

La imagen debajo muestra un esqueleto visual del marco que estaremos creando. Como puedes ver, no fue construido con tablas; estamos usando listas desordenadas para mayor flexibilidad y responsividad.

css3-pricing-table-markup

Marco HTML

Antes que nada, debemos empezar con un documento vacío. Aquí es muy importante la etiqueta meta viewport, que permite que todos los dispositivos interpreten nuestra estructura responsive adecuadamente.

Ahora podemos empezar con el contenido de nuestra tabla (o mejor dicho lista):

Abajo del todo hemos incluido prefixfree (antes de cerrar la etiqueta </body>), lo que nos permite usar propiedades CSS sin prefijar. Funciona detrás de escenas, agregando el prefijo de el buscador actual a todo código CSS, solamente cuando se necesita.


Estilos

Habiendo clasificado nuestro marco, vamos a agregar algunos estilos. Yo lo haré usando etiquetas <style> en el head del documento, pero tú puedes usar una hoja de estilos separada si quieres.

1. Estilos Básicos

Para empezar, aplicamos un reset CSS básico y usamos una fuente personalizada 'Ubuntu', la cual traemos de Google Fonts.

2. Tabla de Precios y Bloques de Precios

La tabla de precios (.pricing_table) tiene un ancho de 75%, limitado a 800px para que no ocupe una gran cantidad de espacio en pantallas anchas.

Nos estamos ocupando de mobile primero, por lo tanto .price_block tiene un ancho del 100% por defecto para cubrir todo el ancho disponible. Más adelante usaremos media queries para encajar más bloques horizontalmente en pantallas más anchas.

css3-pricing-table-1x4

El margen inferior de 10px en .pricing_block entra en juego cuando los usuarios ven la tabla de precios en pantallas más chicas, particularmente cuando los bloques de precios bajan y se apilan debajo de los otros. Sirve para compensar un margen superior negativo de 10px aplicado al título del precio (.price_title) del bloque de precio apilado debajo. Verás más acerca del margen negativode 10px en la siguiente sección.

El borde transparente de 1px en .pricing_block crea un canal que ayuda la separación de los diferentes bloques de contenido.

A .price_block también le aplicamos position: relative; para que cuando se le apliquen sombreados al hacer hover, se pueda utilizar z-index para hacer que la sombra aparezca sobre los elementos vecinos.

3. Títulos de Precios

css3-pricing-table-header

Los títulos de los precios tienen un margen superior de -10px. Esto hace que el contenido del .price_block se mueva hacia arriba para que se muestren por encima de la sombra.

4. Etiquetas de Precios

Vamos ahora por las secciones que muestran los detalles del precio.

css3-pricing-table-price-tags

Las etiquetas de precio están centradas verticalmente. Esto es necesario para precios que no tienen una tenencia (eg. FREE).

.price está configurado para tener display: table; y su hijo inmediato .price_figure está configurado para tener display: table-cell; y vertical-align: middle; para lograr el efecto.

.price_figure actúa como un contenedor para .price_number y .price_tenure, para que puedan estar alineados verticalmente como una sola unidad.

5. Características

6. Footer y Botón de Acción

7. Efecto Hover

Habrán tres aspectos con el efecto hover.

  • Cambio de color - El color de fondo de .price y .action_button es cambiado de gris oscuro a un degradé naranja-amarillo. Adiccionalmente, .price también obtiene una sombra interna anaranjada para mejorar el efecto de los colores.
  • Sombra - una sombra básica translúcida de 5px.
  • Cambio hacia arriba y escalamiento usando CSS3 transforms - El .price_block es escalado a 104% y movido hacia arriba 5px.

.price_table ya tiene CSS3 transitions aplicadas, lo que hace que el hover una leve animación.

También puedes usar los efectos del hover como un estado activo si quieres destacar uno de los precios por defecto. Todo lo que tienes que hacer es agregar una clase activa a uno de los bloques de precios y mover/copiar los estilos del hover.


Agregando Media Queries

Seguiremos un simple enfoque para hacer la tabla de precios responsiva. Las secciones ya son de por sí fluidas ya que usan anchos basados en porcentajes, por lo tanto todo lo que tenemos que hacer es controlar el número de bloques horizontales visibles en los diferentes tamaños de pantalla.

  • < 480px - mostrar un bloque (estes es nuestro valor por defecto)
  • 480px - 768px - mostrar 2 bloques
  • 768px+ - mostrar los 4 bloques

Estos puntos están definidos puramente en lo que funciona visualmente con el diseño. Agreguemos nuestras media queries por debajo de nuestros otros estilos.

Para el rango de 480px - 769px hacemos que cada bloque de precios tenga 50% de ancho. Esto los apilará efectivamente en filas de dos. El .price_block:nth-child(3) {clear: both;} nos asegura que el tercer bloque borra los dos bloques superiores, incluso cuando el estado hover cambia el tamaño de todo. También le estamos dando un borde derecho de 1px a .price_block (los impares) para crear un canal entre los bloques de precio en la izquierda y los de la derecha.

css3-pricing-table-2x2

Para pantallas de 768px y superior, configuramos el ancho de cada bloque a un 25%, dándonos filas de 4. También le estamos dando bordes a la derecha de todos los bloques de precio, excepto el último, para crear el mismo canal vertical que mencionamos arriba.


Conclusión

Con una estructura fluida, algunos estilos simples y algunos puntos de interrupción, hemos construido una genial tabla de precios con CSS3. ¡Espero que la encuentres útil!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.