Hoy vamos a ver si podemos tomar una sola imagen insertada a través de HTML y hacer que se vea como una pila desordenada de imágenes utilizando solo CSS. La clave: los pseudo elementos.
En el camino, veremos cómo emprender un proyecto como este puede llevar rápidamente a un código desordenado y cómo podemos combatirlo con algunas prácticas de codificación DRY impresionantes.
El reto
Estaba revisando parte del increíble contenido de nuestro nuevo sitio de descargas, Pixels Daily, y encontré una pequeña y fantástica PSD llamada Stacks que te ayuda a construir rápida y fácilmente una pila de imágenes de estilo Polaroid en Photoshop.
Como puedes ver, es un efecto bastante atractivo. Tan pronto como lo vi, inmediatamente quise intentar hacerlo con CSS. Sin embargo, es una situación difícil porque hay varias capas apiladas una encima de la otra y no queremos saturar nuestro marcado con tres imágenes para cada elemento de la galería. Entonces, ¿cómo podemos realizar esta ilusión al tiempo que minimizamos nuestro marcado HTML?
Resulta que la respuesta que buscaba se encuentra en los pseudo elementos. Este es un caso de uso perfecto para mostrar la magia de: antes y: después. Empecemos.
El HTML
Para crear nuestra primera pila, el único HTML que necesitaremos es un div con una imagen dentro de él. ¡Eso es todo! El resto del elegante trabajo de pies se realizará a través de CSS. Asegúrate de agregar el? Stackone? clase al div.
Aquí nos hemos dirigido a la clase que contiene nuestra imagen superior, luego implementamos el: antes del pseudo elemento sin contenido. Esto agrega efectivamente otro elemento al flujo de documentos para que podamos trabajar. Ahora vamos a diseñar como hicimos nuestra imagen anterior:
La clave a tener en cuenta aquí es que realmente no estamos trabajando con una imagen. Podría cargar en otra imagen, pero sería una mala idea considerando que estamos haciendo pilas de tres. ¡Por cada imagen en la galería, no queremos cargar en tres! Afortunadamente, dado que la mayor parte del área de superficie de los pseudo elementos estará oculta, simplemente podemos usar un color sólido y aún así lograr el efecto que estamos buscando.
Posicionamiento
En este punto, las cosas no se ven tan bien. De hecho, realmente hemos estropeado nuestra imagen!
Como puede ver, nuestro pseudo elemento está interfiriendo con la imagen. Para solucionar esto, necesitamos agregar un poco de contexto de posicionamiento, luego empujarlo hacia atrás con z-index. He dividido los diferentes trozos de estilos aquí para que pueda ver claramente lo que está pasando con cada bloque.
Al utilizar la posición absoluta, podemos empujar nuestra imagen en su lugar dada la posición inicial de la imagen original. Como dijimos, el índice z luego empuja la imagen al fondo, lo que ayuda con la interferencia que recibíamos antes. Finalmente, lanzamos un efecto de transformación para tirar de la rotación desordenada que se ve en el Stacks PSD original.
Control del progreso
En este punto, todo se ve muy bien! Nuestra segunda foto (bueno, foto falsa) está bien debajo de nuestra primera foto y tiene suficiente rotación para distinguirla. Una más y estamos en casa libres.
El Segundo Pseudo Elemento
Como probablemente pueda adivinar, para agregar una tercera foto a la pila, necesitamos utilizar el: después del pseudo-elemento. Esto funciona exactamente igual que lo que acabamos de hacer, por lo que no es necesario explicarlo en detalle. Las diferencias principales serán un color de fondo, una posición y una rotación diferentes.
Control del progreso
¿Podrías ver eso? ¡Hemos terminado nuestra primera pila de imágenes! Es un efecto bastante elegante, ya que en realidad solo usa una sola imagen.
Un flujo de trabajo defectuoso
Dado que la PSD original tenía varias pilas de imágenes diferentes para elegir, quería hacer lo mismo con las clases de CSS. Para hacer esto, podríamos copiar y pegar fácilmente todo el código anterior en un nuevo? Stacktwo? Clasifique y cambie la rotación / posicionamiento de los pseudo elementos. Bam: te has conseguido una nueva pila.
Sin embargo, aquí está el problema: hice esto con la friolera de ocho pilas diferentes y el resultado fue una enorme cantidad de código.En serio, era más feo que un diseño basado en tablas de 1997. El problema, por supuesto, es que me estoy repitiendo una y otra vez. Más de la mitad de mi código se compone de pura redundancia. No puedo, en buena conciencia, transmitirte prácticas tan horribles.
CSS SECO
Andy Hunt y Dave Thomas acuñaron el término "DRY". En relación con la programación, ¿qué significa? No se repita. Para hacer un punto semántico inane, CSS no es técnicamente un lenguaje de programación, es un lenguaje de hojas de estilo. Sin embargo, si lo tratamos como un lenguaje de programación y aplicamos los conceptos de codificación DRY, obtenemos un resultado mucho mejor.
Veamos si podemos aplicar estas prácticas para hacer que nuestro código sea un poco más breve y extensible.
Intentemos eso otra vez
Si creamos un montón de clases y seguimos nuestra ruta actual, nuestro CSS se volverá difícil de manejar. Desde el principio, tendremos que declarar cada clase individualmente y luego pasar una gran parte del código a cada una. Y esto es antes de que incluso nos acerquemos a los pseudo elementos, que literalmente triplicarán nuestro código.
Dado que se compartirá una gran cantidad de estilos, recortemos nuestro código y coloquemos todos estos estilos en un solo bloque de declaración.
Esto toma nuestros estilos centrales y los aplica a todas las clases iniciales de una sola vez, lo cual es mucho Mejor que repetirnos una y otra vez. Como siguiente paso opcional, podría ser aún más elegante con sus selectores.
Observe cómo todas nuestras clases comienzan con las mismas cinco letras: "pila". Dada esta información, podemos sacar la selector de valor de atributo de subcadena arbitraria y apunta a cualquier clase que comience con esta cadena de cinco letras.
¿Qué tan elegante es eso? ¡Este selector se dirige a todas esas clases para nosotros! Aún mejor, si elegimos agregar ocho clases de pila más a la mezcla, este selector seguirá funcionando perfectamente.
Llevemos esto al extremo y veamos cuán breve podemos hacer nuestro código. La clave aquí es encontrar todo lo que se repite e intentar usarlo solo una vez. Como puede ver, comencé con las declaraciones que se pueden aplicar solo a la? Pila? clases Luego pasé a los estilos que podrían aplicarse a las clases de pila junto con los elementos: antes y después. Reduciéndolo una vez más, configuré un bloque de declaración solo para los estilos: antes y después. Finalmente, terminé con el color diferente que estamos usando para: antes de las clases.
Lo que hemos hecho aquí se toma literalmente cientos de líneas de código y se comprimen en un espacio pequeño. ¡Esto es fantástico para el mantenimiento, los tiempos de carga y su cordura general! Es un poco difícil envolver tu mente en torno a los principios DRY al principio, pero una vez que lo hagas, nunca mirarás hacia atrás.
Otras pilas
De aquí en adelante, cada pila será bastante única, así que tendremos que codificar el resto de uno en uno. Un poco de Sass o Less iría un largo camino para ayudar a esta parte, pero ustedes están hartos de mí despotricando sobre la maravilla de los preprocesadores, así que lo hice a lo largo.
Compatibilidad del navegador
En mis pruebas, la compatibilidad del navegador aquí fue realmente impresionante.Todo debería funcionar bien en Safari, Firefox, Chrome, Opera e IE9 +. Para IE7, obtienes una galería de imágenes simple sin el elegante efecto de pila, que considero completamente aceptable, ya que es un toque puramente estético similar a las esquinas redondeadas.
IE8 es el complicado porque soporta parcialmente lo suficiente para arruinar todo. Puede decidir cómo abordar este problema como desee, pero la solución que se me ocurrió fue usar un truco horrible y sucio para apuntar solo a IE8, que es agregar \ 9 a cualquier estilo de IE8. Utilizando esta técnica, simplemente escondí los elementos: antes y después después para que IE8 obtenga una galería de imágenes simple como IE7.
Los selectores de lujo son donde IE8 tiende a ser disparado, en realidad es compatible antes y después, siempre y cuando se adhiera a la sintaxis de un solo colon. Si enumera las clases con comas en lugar de usar el selector de valor de atributo, debería poder obtener IE8 para realizar el efecto de pila.
Conclusión
Empaquetamos mucho hoy. Construimos una ilusión de pila de imágenes geniales, aprendimos cómo implementar: antes y: después, y luego discutimos las mejores prácticas para codificar utilizando una mentalidad DRY. ¡Espero que hayas aprendido algo y te hayas divertido tanto como yo!
Mantenga un ojo en PixelsDaily en los próximos días para una descarga gratuita impresionante que contiene todo el código fuente de este tutorial junto con ocho pilas de imágenes impresionantes que puede usar en sus proyectos.