5 tablas de precios responsivas con HTML y CSS para tu sitio web
Ejemplos de tablas de precios responsivas para tu sitio web
En esta ocasión les traemos 5 ejemplos de tablas responsivas para utilizar en tu web
1 – Tabla de precios tipo «Zebra»
Aquí hay una tabla de precios que sigue las normas más convencionales. Creada por Agustín Ortiz mostrando sus habilidades de desarrollo.
Utiliza un diseño de «Zebra», grandes encabezados de precios y colores variados para ayudar a que un formato de precios específico destaque del resto.
Pueden cambiar fácilmente los colores y seguir teniendo el mismo formato para que esto funcione en su propio sitio.
2 – Lista de precios profesional
Los sitios web B2B a menudo buscan diseños más profesionales que se alejen de los esquemas de color creativos y los iconos extraños. Este diseño de precios es un ejemplo siguiendo un esquema de color típico de tonos oscuros y claros.
Una columna de precios utiliza un resaltado azul oscuro para resaltarla de resto de la tabla. Es una práctica estándar seguir esta técnica, ya que puede llevar a mayores conversiones.
Es por eso que el plan «profesional» también usa una sombra paralela para aparecer encima de las otras columnas. Pero cuando se cambia el tamaño más pequeño cae en una formación de pila para una navegación más fácil.
3 – Tabla responsiva con Bootstrap
Bootstrap es una herramienta excelente ya que permite hacer infinidad de cosas con su framework y sus temas relacionados. Uno de estos ejemplos es esta tabla de precios BS creada por Sahar Ali raza.
Gran parte de este diseño está codificado de forma personalizada, incluidos los fondos de cabecera inclinados y las animaciones flotantes.
Pero el diseño general se basa en bootstrap que hace que sea totalmente responsive de forma predeterminada.
La tipografía es impresionante, y también adoro las animaciones flotantes mientras se mueve sobre cada fila de elemento de entidad. Un diseño de mesa limpio que podría funcionar para casi cualquier sitio Web.
4 – Tabla simple y limpia
Super limpia y ligera, tabla de precios blancos creada por Daniel Hearn.
No se basa en muchos colores o características de fantasía para destacarse. En su lugar, utiliza gris para los encabezados y negro/blanco para el contraste de texto. Esto realmente funciona bien ya que los botones de CTA mantienen un fuerte efecto de contorno verde.
Cuando se reduce el color en una tabla se señala la atención a las únicas áreas con color, y esto por lo general anima a más clics con más tráfico. Puesto que esto se ejecuta en CSS puro.
5 – Tabla con Flexbox
Al pasar el ratón sobre la mesa cada columna crece un poco y aumenta el color de fondo. Esto ayuda a la columna a destacarse del resto y captar la atención más rápidamente. Es un efecto agradable que se traslada a las transiciones CSS de la tabla mientras se cambia el tamaño del navegador.
Aunque la característica más importante aquí es el uso de Flexbox para formatear las columnas de la tabla.