Érase una vez que dependíamos únicamente de Photoshop para crear fantásticos efectos de imagen. En estos días, sin embargo, estamos recurriendo cada vez más a CSS puro para agregar dulces a nuestras imágenes. La aplicación de tratamientos de imagen personalizados utilizando el código permite un flujo de trabajo infinitamente flexible que es fácil de modificar en cualquier momento.
Hoy te mostraré algunos trucos de imágenes CSS extremadamente simples y divertidos. Desde polaroids a viñetas, no vas a creer lo que podemos lograr.
polaroid
Manifestación: Haga clic aquí para ver la demostración en Tinkerbin.
Nuestro primer truco de imagen es una técnica polaroid simple. Al utilizar diferentes tamaños de bordes, podemos crear fácilmente el marco blanco que rodea el popular estilo de foto instantánea de hace unas décadas.
Es cierto que este efecto es súper cursi, pero estoy seguro de que puedes encontrar una aplicación decente.
HTML
Nuestro HTML para este efecto es un div con la clase? Polaroid? aplicado. Luego usaremos un párrafo y una imagen para nuestro marcado de núcleo. Estaré usando una imagen de 200px por 200px (esto importa).
El resultado debe verse como dos bordes de 5px, uno negro y otro blanco.
CSS
Ahora que conoce la esencia de cómo funcionan las sombras, es hora de implementar nuestro CSS real. El verdadero problema es que tenemos que usar tres versiones diferentes de esto, pero definitivamente queremos asegurarnos de que todos los navegadores posibles estén cubiertos.
Viñeta
Manifestación: Haga clic aquí para ver la demostración en Tinkerbin.
Esta vez vamos a utilizar un tipo diferente de cuadro de sombra para crear un efecto muy diferente. ¿Utilizando una? Inserción? sombra, podemos crear una bonita viñeta similar a Photoshop en una imagen usando solo CSS. Es un truco bastante bueno que realmente puede hacer que sus imágenes se destaquen.
HTML
Esta vez necesitaremos un div vacío. Opcionalmente, puede colocar texto dentro, pero la imagen deberá insertarse a través de CSS. Esto se debe a que la sombra insertada realmente aparecerá bajo el contenido insertado a través de HTML, lo que significa que una imagen la escondería completamente.
CSS
Para el CSS, necesitaremos establecer una imagen en el fondo, luego definir un ancho y alto para el div. Una vez que haya configurado su div, es hora de aplicar las sombras. Observe que el valor de inserción se implementa y que tanto el desplazamiento vertical como el horizontal se establecen en 0.
Puede resultarle extraño que haya implementado tres versiones de la misma sombra de inserción exacta para cada navegador. La razón por la que hice esto es simplemente porque quería una viñeta realmente oscura e intensa, ¡y una sombra simplemente no la estaba cortando!
Grungy Photo
Manifestación: Haga clic aquí para ver la demostración en Tinkerbin.
Para prepararse para esto, necesita crear una superposición de imagen de fondo grungy transparente. Utilicé esta textura para crear esta imagen. El truco aquí es hacer que la textura tenga exactamente el mismo color que el fondo de la página en la que lo colocará.
Básicamente, lo que haremos es aprovechar múltiples fondos para aplicar una textura grunge reutilizable. Podríamos enmascarar la imagen con la textura, pero eso no sería compatible fuera de Webkit, por lo que esta es una forma mucho más fácil de usar para el navegador.
HTML
El mismo ejercicio que la última vez, simplemente cree un div vacío al que podamos aplicar imágenes de fondo.
CSS
Solo para mezclar las cosas, hagamos que el efecto grunge solo aparezca en el hover. Para comenzar, aplicamos una imagen de fondo, dimensionamos el div y creamos una viñeta ligera como la última vez. Ahora todo lo que tenemos que hacer es agregar nuestra imagen de fondo grunge al pasar el cursor.
CSS fondos múltiples son muy fáciles de trabajar. Al igual que con las sombras anteriores, simplemente agregue una segunda usando una coma para separar las dos. La imagen grunge va primero ya que la queremos encima.
Conclusión
Espero que hayan disfrutado estos cuatro trucos de imagen CSS. Cada uno debe tomar solo un minuto para aplicar, pero todos agregan un impulso de estilo definido a las imágenes simples. Al igual que con cualquier truco de diseño, ¡asegúrate de usarlos de forma selectiva y no exageres!
Si tiene sus propios efectos de imagen CSS rápidos, háganoslo saber en los comentarios. Además, todas las demostraciones anteriores son en vivo y editables, así que asegúrate de ajustarlas y dejar un enlace a tu versión a continuación.