CSS puede extraer muchos trucos de imagen realmente geniales: manipulación de tamaño, desaturación, incluso desenfoque. Una limitación con la que nos encontramos es que realmente no se puede dividir una imagen en varias partes. Por ejemplo, si quisieras cortar una foto a la mitad y animar la separación, realmente no podrías hacerlo con CSS puro. ¿Podrías?
Hoy vamos a programar una solución que nos permita lograr este mismo truco sin una onza de JavaScript o archivos adicionales. Vamos a ver cómo funciona.
Escurrir el bulto: Demo de lanzamiento
Punta de sombrero para Kyle Foster
Recientemente, el desarrollador Kyle Foster creó un pequeño y agradable complemento jQuery con un efecto que realmente me gusta (se muestra aquí). Cuando el usuario se desplaza sobre una imagen, se divide por la mitad horizontalmente y se separa para revelar un mensaje oculto. Aquí hay una captura de pantalla de su demo:
Como puedes ver, es una gran pieza de UI. Como siempre hago cuando me encuentro con algo como esto, comencé a pensar en cómo lograr algo similar con solo CSS. El problema es que CSS realmente no te permite dividir una imagen como esa. Sabía que varias imágenes de fondo contenían la solución, pero no quería tener que insertar dos imágenes separadas para cada foto que usaba este efecto. Afortunadamente, con un poco de ingenio, podemos lograrlo con una sola imagen. Sigue leyendo para ver cómo.
Paso 1: formatea tu imagen
CSS nos permite aplicar múltiples imágenes de fondo a un solo elemento. Curiosamente, podemos usar esta funcionalidad para aplicar la misma imagen de fondo varias veces, posicionando cada instancia de una manera única. Con esta información en mente, se presenta una solución a nuestro problema.
El truco para lograrlo es dividir la imagen a la mitad en Photoshop antes de incrustarla. Mira el siguiente ejemplo para ver lo que quiero decir. Parece un poco raro, pero nos da la capacidad de hacer exactamente lo que necesitamos.
El flujo de trabajo para hacer esto es el siguiente (no dude en modificar las dimensiones):
- Crea una imagen de 300 píxeles de ancho por 300 píxeles de alto
- Corta la imagen en el centro y coloca las dos mitades en capas diferentes.
- Ir Tamaño del lienzo en Photoshop y aumentar el lienzo a 300px por 375px.
- Coloque la mitad inferior de la foto en la parte superior del lienzo.
- Coloque la mitad superior de la foto en la parte inferior del lienzo.
Esto suena como un dolor, pero una vez que envuelve su mente en torno a cómo funciona, va muy rápido. Incluso puedes grabar una acción que hará esto por ti en unos segundos. Básicamente, lo que hemos hecho es hacer posible que un archivo sirva como parte superior e inferior de nuestra imagen. Puede realizar esta función porque se agrupa muy bien: cuando dos se topan entre sí, la imagen fluye sin problemas de una a otra. No te preocupes por la raya blanca gigante en el medio, que simplemente estará oculta.
Paso 2. El marcado
Ahora que tenemos una buena idea de cómo va a funcionar esto, vamos a marcarlo. Recuerda que queremos que se revele un título, así que colocaremos una etiqueta de párrafo dentro de un div.
Este div tiene dos clases: revelar y conectar. ¿El estreno? clase es donde colocaremos gran parte del código repetible que querremos llevar a cabo en todos los elementos similares. ¿El enchufe? clase contendrá el código específico que se relaciona con la foto del enchufe que se muestra arriba.
Paso 3. Starter CSS
Para comenzar a correr, aquí está el CSS básico que usaré en la demostración. La parte que realmente importa es la? Revelar? Código, que establece el tamaño de nuestro contenedor.
Paso 4. CSS de fondo múltiple
Ahora, recuerde que nuestra imagen de inicio era de 300px por 300px, que es el tamaño que creamos para nuestro contenedor. Esto significa que podemos llenar ese contenedor con área de imagen sin permitir que se muestre ninguna de las barras blancas en nuestro jpg.
Para hacer esto, estableceremos tres fondos en nuestro elemento, cada uno separado por una coma. Los dos primeros son la misma imagen de enchufe y el tercero es un color sólido. Por un lado, estamos tipo de usando varias imágenes, pero el navegador solo tiene que cargar en un archivo, por lo que mantenemos nuestras solicitudes http más bajas que si hubiéramos usado dos imágenes distintas (básicamente es como usar sprites de imagen).
Los números después de cada uno de los fondos representan valores de posicionamiento. El primer número es el desplazamiento horizontal y el segundo es el desplazamiento vertical. Compensamos nuestra primera imagen con 150px positivos y la segunda con 225px negativos. Tenga en cuenta que 150 + 225 es igual a 375, que es la altura total de nuestro jpg.
También tenga en cuenta que es muy importante que establezca los fondos en no-repetirDe lo contrario, esto no funcionará en absoluto.
Paso 5. Transición
Cuando nos movemos sobre el elemento, vamos a deslizar las dos instancias de nuestra foto para mostrar un título. Queremos asegurarnos de que esto suceda sin problemas, así que asegúrese de agregar una transición.
Paso 5. Estilos Hover
En este punto, todo lo difícil está terminado.Todo lo que tenemos que hacer es mover cada instancia de la imagen desde el centro cuando el usuario se desplaza sobre el elemento. Hacemos esto ajustando el valor de posicionamiento así:
Ahora, cuando se produce un evento de desplazamiento, la primera instancia de la imagen se deslizará hacia abajo 60px y la segunda instancia se deslizará hacia arriba 60px. Esto es lo que parece:
Paso 6. El título
¡Con eso, nuestro efecto aparentemente imposible en realidad se vuelve bastante simple! Sin embargo, no lo olvides, tenemos ese título molesto con el que trabajar ahora. Dado que estamos incrustando nuestra foto con imágenes de fondo CSS, el texto realmente aparecerá en la parte superior del fondo, que no queremos que queramos en absoluto. Con un pequeño margen de beneficio adicional, podríamos crear un div adicional y guardar el texto en otro lugar, lo que funciona bien.
Sin embargo, podemos mantener nuestro marcado al mínimo y simplemente falsificarlo si manipulamos la opacidad del texto. Usando este método, simplemente haremos que el título sea invisible hasta que el usuario se desplace sobre la imagen y luego la desaparezca. Aquí está la parte de CSS que necesitaremos para hacer todo esto.
Paso 7. Hacer espuma, enjuagar, repetir
Eso es todo lo que hay que hacer. Hemos configurado un sistema que se puede expandir fácilmente a través de varios elementos. Aquí aplicaremos rápidamente esto a tres artículos.
Ahora podemos usar CSS similares en cada versión, aplicando los mismos valores de posicionamiento en todo el tablero al mezclar las imágenes de fondo.
¡Echar un vistazo!
Nuestro trabajo está terminado, ahora es el momento de sentarse y admirar lo que construimos. Compruébalo siguiendo el siguiente enlace. Una vez que lo haya echado un vistazo, deje un comentario a continuación y hágame saber lo que piensa.
Manifestación: haga clic aquí para lanzar
