Hoy vamos a tomar algunas tablas de precios de PSD de Design Curate e intentaremos convertirlas a CSS puro para que pueda colocarlas fácilmente en su sitio.
Será un ejercicio súper básico pero divertido para llevar un diseño estático a la web y aprenderá un montón de cosas divertidas en el camino, como el estilo de las etiquetas de recursos humanos para crear un efecto superíndice.
Diseño original
El diseño de nuestras tablas de precios es super minimal. Básicamente son solo un rectángulo de esquina redondeada con texto y botones. Descargue el PSD original aquí para verlo más de cerca (estamos desechando el banner Best Value)
Como puede ver, la tarea principal aquí simplemente será agrupar los elementos en su lugar. La barra superior puede parecer difícil, pero en realidad es un juego de niños. Más interesante desde mi perspectiva es cómo diseñar esa delgada línea divisoria y sacar un superíndice del texto.
También es de interés el hecho de que la tabla de precios del centro es un poco más grande que las demás y las solapa. Esto podría significar diseñar dos versiones únicas de la tabla, pero usaremos un pequeño truco agradable que le quitará todo el esfuerzo. Vamos a saltar y empezar.
Forma básica
Para comenzar, nos centraremos en crear una tabla de precios. Una vez que hemos construido uno, podemos expandirlo en tres con bastante facilidad. Nuestro primer paso es crear la forma básica de una sola tabla: un rectángulo vertical con esquinas redondeadas.
Comenzaremos con un div que contendrá todo el código para una tabla de precios. Asignar la clase de? Tartable? para que podamos reutilizar fácilmente este elemento más tarde.
Ahora vamos a añadir un poco de estilo. Nuestras tablas de precios serán blancas, así que establezco un color de fondo gris para ayudarlas a destacar. Luego apliqué algo de tamaño a nuestra clase, redondeé las esquinas y añadí una sombra.
Progreso de la actualización
Este paso debe darle una simple caja blanca. Asegúrese de que sus dimensiones sean correctas y que sus sombras y esquinas redondeadas estén funcionando correctamente.
Barra superior
Ahora que tenemos nuestra forma básica en su lugar, comenzaremos desde arriba y trabajaremos hacia abajo. Lo primero que necesitamos es, obviamente, esa barra de color en la parte superior que tiene el nombre de cada uno de nuestros planes de precios: Básico, Pro y Premium. Para lograr esto, crea otro div con la clase de "top". No se preocupe, no nos volveremos locos, este será el último que necesitamos para nuestra plantilla de tabla de precios base.
Dentro del div, coloque un h2 (usaremos el h1 más adelante) con el nombre de la tabla de precios. Simplemente podríamos usar este h2 sin el div para crear la barra superior, pero estructurarlo de esta manera hace que sea más fácil agregar una etiqueta secundaria u otro contenido aquí más adelante.
Convertir esa división en nuestra barra superior es bastante simple. Para empezar, le damos un ancho de 250px, una altura de 50px y tomamos muestras del PSD para obtener un color de fondo de # 2F2E35. Luego aplicamos el mismo radio de borde que usamos antes (10px), solo que esta vez lo aplicamos solo a las dos esquinas superiores, dejando las esquinas inferiores cuadradas.
Luego es el momento de apuntar al h2 y darle un poco de estilo. Simplemente cambié el color a blanco, alineé el texto al centro y utilicé una abreviatura de fuente elegante para establecer el peso, el tamaño, la altura de la línea y la familia de fuentes para nuestro titular.
Progreso de la actualización
Nuestra caja blanca llana ya está empezando a parecerse a la tabla de precios que estamos buscando. Ahora simplemente llenamos el contenido del centro y estaremos listos para comenzar.
Caracteristicas
Bajando por la tabla, a continuación encontramos una lista de características. De inmediato, esa oración debería darle una pista sobre cómo podemos marcar esta sección: con una lista. El orden no es nada específico aquí, así que usaremos una lista desordenada.
Observe que en nuestro diseño original, la primera palabra de cada función está en negrita. Agregaremos algunas etiquetas fuertes para ayudarnos a lograr esto en nuestro diseño.
La creación de esta lista es bastante fácil. Para empezar, queremos eliminar las viñetas, así que establezca el tipo de estilo de lista en "ninguno". Después de eso, uso la misma abreviatura de fuente que la anterior, pero esta vez con un tamaño y una altura de línea diferentes.
Observe que la altura de línea se establece sin una unidad de medida (2, no 2px). Este es un simple multiplicador que toma en cuenta el tamaño de la fuente (18px * 2 = 36px line-height). Puedes leer más sobre esta técnica aquí.
Para terminar este bloque de estilos, apunte esas etiquetas fuertes y asegúrese de que estén en negrita.
Progreso de la actualización
¡Nuestra lista de características se ve perfecta! Esos estilos más audaces realmente te ayudan a concentrarte en las piezas importantes de información.
Línea divisoria
En el diseño original, hay una línea sutil que separa la lista de características del precio.Esto se puede lograr con una etiqueta de regla horizontal simple:
El estilo predeterminado para la línea horizontal es cerrar A lo que queramos, pero no del todo. Por ejemplo, observe que se extiende a lo largo de la tabla de precios. En realidad lo queremos más estrecho y centrado.
Diseñar una hora puede ser complicado y frustrante si no sabes lo que estás haciendo. Usted pensaría que todo lo que tendríamos que hacer es establecer el ancho y el color y estaríamos listos, pero ese no es el caso.
Por defecto, ciertos navegadores aplican algunos estilos extraños que debes borrar. Para asegurarnos de que obtenemos el aspecto que queremos, tenemos que borrar los bordes, declarar tanto el alto como el ancho y establecer un color de fondo. Luego lo centramos usando matemáticas básicas: si nuestra tabla es de 250 px de ancho y nuestra línea es de 190 px, eso deja 60 px de ancho a la izquierda. Usando márgenes, cortamos ese valor a la mitad y asignamos treinta píxeles de espacio al lado izquierdo de la línea.
Progreso de la actualización
Con ese poco de estilo, nuestra pequeña línea se ve exactamente como queremos. Siéntase libre de experimentar con su hora para ver qué tipo de estilos de fantasía puede hacer. CSS-Tricks tiene algunos grandes ejemplos de inspiración.
Precio
El siguiente es el precio. Esto viene en dos partes, el gran precio y el pequeño texto debajo que dice "por mes". La parte difícil es que, en el diseño original, el signo de dólar es superíndice.
Quería ser semántico acerca de esto, así que seguí adelante y usé el? Sup? etiqueta. Algunas fuentes parecen pensar que esta es una etiqueta obsoleta, pero por lo que puedo decir, ese no es el caso. Tanto el sub como el sup parecen ser válidos en HTML5 y tienen un montón de soporte de navegador en todos los ámbitos. Estoy abierto a argumentos opuestos aquí, así que avísame en los comentarios si no estás de acuerdo.
Otro punto potencial para un gran argumento semántico aquí es mi uso de h1. Sin duda, algunos reservan h1 para el título del plan en la parte superior, pero el precio aquí parece ser el dato más importante (orden de importancia), así que pensé que era mejor utilizarlo aquí. Una vez más, siéntete libre de estar en desacuerdo y sigue tu propio camino.
Ahora para nuestro CSS tenemos tres cosas diferentes para apuntar: el h1, el sup h1 y el párrafo. No hay nada lujoso aquí, solo un poco más de tamaño de fuente y un poco de márgenes para colocar las cosas en su lugar. Tenga en cuenta que todo lo que tenemos que hacer para la etiqueta sup es reducir el tamaño de la fuente.
Progreso de la actualización
Nuestra tabla de precios está casi completa! Hasta ahora hemos conquistado las cuatro piezas más difíciles del rompecabezas, todo lo que queda es crear un botón en la parte inferior.
El botón
Para finalizar nuestra tabla de precios, pongamos un botón de registro en la parte inferior. Para lograr esto, simplemente introduzca una etiqueta de anclaje en su HTML. Esto terminará nuestra división de precios reutilizable.
Para convertir este enlace de texto simple en un botón, configure la pantalla para bloquear y definir un ancho y alto. También asegúrese de corregir el estilo de enlace predeterminado configurando el color y la decoración del texto. También transformé el texto en mayúsculas para que coincidiera con el diseño original. Finalmente, aplique el mismo radio de borde que antes.
Para finalizar el botón, puedes usar un color sólido para mantener las cosas simples, pero opté por un gradiente básico que se aclara cuando te pasas el cursor sobre él. Es un trozo grande y aterrador de CSS, pero no te preocupes, todo es bastante básico. Use una herramienta gratuita como esta para ahorrarle algunos problemas si está creando su propio gradiente.
Progreso de la actualización
Con eso, nuestra primera tabla de precios está completa! Si quisiéramos ir más lejos, podríamos tomar una fuente web de slab serif para que se vea igual a la PSD, pero me gusta la Helvetica bien aquí. ¡Ahora tenemos que tomar este artículo y convertirlo en tres!
Haciendo tres mesas
Para expandir esto en tres tablas únicas, copie y pegue el HTML que acaba de crear, de modo que tenga tres divs con precios de pago y colóquelos dentro de un div contenedor. Luego, personalice el texto en cada uno para que las características y el precio sean correctos. Por último, añadir un? Aparece? Clase a la segunda mesa. Vamos a hacer esto para llevar a cabo el efecto ampliado.
Para hacer que las tablas de precios aparezcan una al lado de la otra, regrese a su clase de precios y haga flotar hacia la izquierda. También aplique un ancho de 780 píxeles a su contenedor y céntrelo en la página con márgenes automáticos izquierdo y derecho.
Ahora tenemos tres tablas de precios en una fila, que es exactamente lo que queremos. Sin embargo, recuerde que el centro debe ser más grande que los otros dos, pero aún no es el caso.
En lugar de revisar y ajustar manualmente cada pequeño conjunto de dimensiones a lo largo de la tabla de precios del centro, podemos apuntar a la clase única que le dimos y aplicar una transformación CSS para ampliarla. Dado que todo nuestro contenido es código puro (sin imágenes), la versión ampliada debería verse bien.
¡Todo terminado!
Con eso, nuestras tablas de precios de CSS están completas. La última transformación nos dio exactamente el efecto que queríamos con la mesa central más grande y flotando sobre las otras dos. Echa un vistazo a las versiones de demostración en vivo a continuación.
Manifestación: Haga clic aquí para lanzar la demo
Código: Ver y modificar el código fuente en Dabblet
Conclusión
Espero que hayas disfrutado construyendo estas tablas de precios y que puedas obtener un buen uso de ellas. Utilícelas como desee y asegúrese de descargar la PSD y las versiones vectoriales de Design Curate.