Ha pasado un tiempo desde que perfeccionamos nuestras habilidades de HTML y CSS con una pequeña demostración divertida, terminemos esa racha con un proyecto que es súper atractivo y súper práctico.
¿Hoy vamos a construir un estilo de tarjeta? ¿Contrátame? Widget que puedes colocar rápidamente en cualquier página web. En el camino aprenderemos un montón de cosas geniales sobre el posicionamiento CSS y cómo usar pseudo elementos para lograr algunos efectos geniales.
Lo que estamos construyendo
Recientemente estuve hojeando la increíble biblioteca de PSD en nuestro sitio asociado PixelsDaily y encontré esta joya del diseñador Marc Gonzales.
Me encanta tanto la idea aquí como la ejecución. Cada cartera debe tener una forma clara de contratar al diseñador y esto proporciona una forma fácil y atractiva de integrar esa funcionalidad.
Marc ha hecho un trabajo increíble aquí, pero el archivo que proporciona es un PSD en capas. Hoy vamos a usar esto como inspiración para nuestro propio widget similar construido completamente de CSS y HTML. Cambiaremos algunas cosas en el camino y nos tomaremos algunas libertades, pero al final la pieza final será muy similar a la que vemos aquí.
Paso 1. Configuración de HTML
Lo primero que vamos a hacer es configurar un HTML muy básico que servirá como estructura para nuestra insignia. Usaremos una estructura de dos div: la div externa sostendrá la tarjeta como un todo y la div interna será una forma agradable y fácil de agrupar todos nuestros objetos de texto juntos.
En el div exterior, lanza una imagen que servirá como tu avatar. En la división interna, incluya un h3 con su nombre, un párrafo con el título de su trabajo y una etiqueta de anclaje con las palabras "Contráteme". Tu código debería verse como el siguiente.
Como puede ver, le dimos una altura y un ancho, establecimos el color de fondo y aplicamos un radio de borde para redondear las esquinas. Tome nota de la posición relativa utilizada aquí, esto se volverá relevante más adelante, solo estoy planeando con anticipación.
Más allá de las esquinas redondeadas, el diseño original de la tarjeta tiene un par de características más que requerirán un alto código CSS3. Lo primero es box-shadow, que es bastante fácil y solo requiere un prefijo de navegador alternativo en este punto. Agregar un gradiente, sin embargo, sigue siendo un gran lío. Odio codificar gradientes a mano, así que uso este generador para crear código para el gradiente lineal que necesitamos.
Aquí está el código resultante (también agregué un color de cuerpo):
Paso 2 Verificación de progreso
Después de agregar este código, podemos ver claramente la forma de la tarjeta terminada. El problema ahora es que nuestro contenido se está rompiendo fuera de los límites de la tarjeta, lo abordaremos pronto.
Paso 3. Diseña el avatar
Antes de sumergirnos en solucionar el problema del texto feo, pongamos nuestro avatar con estilo y encajándolo en su lugar.
Todo lo que hemos hecho aquí es empujar la imagen con márgenes, asegurarnos de que obtengamos el tamaño adecuado sin importar qué imagen esté usando y agregue un radio de borde. Tenga en cuenta que esto ya no requiere prefijos de navegador. ¡Hurra!
Paso 3 Verificación de progreso
Lento pero seguro, estamos progresando. Ahora nuestro avatar está en su lugar con el estilo que queremos. A continuación, abordaremos el texto!
Etapa 4. Estilo del texto
La forma en que el texto fluye actualmente no es buena. Necesitamos ponerlo a la derecha del avatar en lugar de debajo de él. Nosotros podría Flotarlo, pero creo que el posicionamiento absoluto nos dará más libertad y flexibilidad para empujarlo exactamente donde lo queremos.
Como puede ver, después de aplicar el posicionamiento absoluto, lo empujé hacia abajo y hacia la izquierda, luego alineé en el centro todo el texto. Aquí es donde nuestro posicionamiento relativo que aplicamos anteriormente entra en juego. Usando esta técnica, el div interno absolutamente posicionado considerará que el punto cero es el div externo relativamente posicionado en lugar del punto superior izquierdo del lienzo.
Estilo del encabezado y el párrafo
Ahora que hemos puesto el texto en su lugar, vamos a arreglarlo. Comenzaremos enfocándonos en el encabezado y el párrafo.Todo lo que realmente necesitamos es aplicar un estilo de fuente y un color para cada uno.
Con ese poco de código, ya nos estamos viendo mucho mejor. Solo tenemos que diseñar ese enlace en un botón y estaremos listos para sumergirnos en los pseudo elementos.
Estilo del enlace
La mayoría del texto es fácil de diseñar, pero para el enlace necesitaremos una porción de código mucho mayor. Esto se debe a que el diseño original requiere un enlace que tenga el estilo de un botón. Para hacer esto, necesitaremos agregar algo de relleno, radio de borde y sombras.
Hay algunas cosas importantes que tomar nota de aquí. Primero, eliminé el estilo de enlace predeterminado eliminando la decoración del texto y configurando un nuevo color. Además, agregué el más pequeño de los bordes alrededor del borde del botón para que se destaque un poco. Finalmente, he colocado dos sombras en este elemento. La primera es una sombra insertada que es realmente más un brillo interior y la segunda es una sombra paralela más típica.
Paso 4 Verificación de progreso
Con eso, tenemos un bonito poco? Contrátame? tarjeta. técnicamente, podrías detenerte aquí, pero voy a presionar y crear el efecto de pequeña tarjeta apilada a partir del diseño original.
Paso 5. Apila la cubierta
En el diseño original de Marc, vemos que ha creado la ilusión de una pila de cartas en lugar de simplemente mostrar una sola carta flotando en el espacio. Hay varias maneras en que podríamos lograr esto con el código, pero al final debemos tener en cuenta que sería mejor no saturar nuestro marcado HTML con divs vacíos, una solución de CSS pura sería mucho más preferible.
Dada esta información, podemos recurrir al?: Antes? ¿y después? pseudo elementos para la solución, que explicamos con una profundidad impresionante en nuestro post, The Lowdown on: Before y: After en CSS.
Comenzaremos con el: después del pseudo elemento. Para implementarlo, apunta al? Hireme? Clase y use la sintaxis de un solo colon (IE no le gusta la sintaxis de dos puntos). Establezca el contenido en blanco, la posición en absoluta, el radio de borde en 10px (igual que la tarjeta original) y páselo a la izquierda 4px (el valor superior debe estar en 0). Terminé esto configurando el índice z en -1 para estar seguro de que aparece debajo de la tarjeta original.
Básicamente, lo que buscamos aquí es reconstruir la tarjeta original. Queremos las mismas dimensiones, las mismas sombras, el mismo degradado, etc. La principal diferencia es que agregaremos una rotación para compensar esta tarjeta con respecto a la original.
Ahora repetimos el mismo proceso con el?: Antes? Seudo elemento para que terminemos con una pila de tres cartas. Con esto, el índice z se establece en -2 y la rotación se ha duplicado.
¡Limpia este desastre!
Es muy importante cuestionar siempre su código y examinar cómo puede mejorarlo. Mientras miro los estilos de las tres tarjetas diferentes, veo una tonelada de repetición. Esto es una violación directa del principio de codificación DRY (Don't Repeat Yourself), que ayuda a que su CSS se mantenga limpio y eficiente.
Los mismos valores exactos de altura, ancho, radio de borde, sombra y gradiente se repiten al menos tres veces en nuestro código. Esto es completamente inútil y descuidado. Está bien codificar así, ¿estás dibujando? y jugar para hacer las cosas bien, pero una vez que hayas terminado, siempre debes limpiar.
Podemos lograr esto tomando todos esos valores repetidos y agrupándolos en un solo bloque de declaración que apunta a los tres selectores. Después de esto, podemos dramáticamente Reducir el código necesario para cada tarjeta individual.
Echa un vistazo a la demostración
Buenas noticias, todos hemos terminado! ¿Ahora tenemos un poco impresionante? ¿Contrátame? placa que se puede colocar fácilmente en cualquier página web. He incorporado la demostración de CodePen a continuación para que pueda ver el código y el resultado final. Si eso no te funciona, échale un vistazo aquí.
¿Qué piensas?
Espero que hayas disfrutado este pequeño proyecto tanto como yo. Aprendimos mucho sobre todo, desde apilar objetos con el índice z hasta organizar nuestro código con conceptos DRY. Deja un comentario abajo y déjame saber lo que piensas.
Si tiene alguna sugerencia de mejora o cambio, asegúrese de incluir la demostración de mi CodePen y deje un enlace a su versión a continuación.