Fotos vintage o retro sólo con Css. Aplicación práctica de filter 24.10.12
Transformación de una imagen actual a imagen retro o vintage usando sólo CSS. Filtros (filter), gradientes y box-shadow es todo lo que se necesita.
Fotos vintage o retro sólo con Css. Aplicación práctica de filter
¿Cansado de las fotos tan digitales? ¿Con miedo a estropear el original si usas cualquier programa de edicción? O símplemente, lo tuyo no es el Photoshop, Gimp, o cualquier otro editor de imágenes?
Parece un anuncio de la teletienda. No, no te voy a vender nada. Sólo es un ejemplo práctico del uso de los filtros css para convertir "cualquier" foto actual en una foto con aspecto retro o vintage con un par de reglas Css.
Advertencia innecesaria: hoy por hoy sólo webkit. Así que en los códigos me ahorro el resto de prefijos privativos y para quienes hayan entrado con otro navegador, aquí el antes y después en imágen:
Otra advertencia: como no está en mi naturaleza, la intención es mostrarte el cómo lograrlo y no hacer una obra de arte ;-)
Así que vamos con el código.
<div class="retro">
<img src="sports-q-c-640-480-7.jpg" alt="ViVa VinTaGe!!!" />
</div>
La razón de usar un 'div' es porque ese contenedor de la imagen se necesita para aplicar algún afecto, como vemos luego. Primero los de la propia imagen:
.retro img {
-webkit-filter: sepia(50%) brightness(10%) contrast(6.2) grayscale(.3) blur(1px);
position: relative;
z-index: -1;
}
Como ves, todo es aplicar una serie de filtros Css con sus valores en función de las características de cada imagen y el efecto final que busques.
Al gusto. Sólo tienes que jugar con los valores y quitar o añadir filtros y observar los cambios.
Quizás, y para los más noveles, el z-index con valor negativo es para forzar a la imagen a ponerse "por detrás" o "debajo" del fondo y efectos de su contenedor y con position≠static obligado para que aplique.
El sesultado de este primer paso queda un tanto "plano" y soso. A falta de ese punto final.
Aquí es donde interviene el contenedor de la foto con sus cuatro declaraciones:
.retro {
box-shadow: 0px 0px 100px rgba(0,0,0,.8) inset;
background: -webkit-linear-gradient(top, rgba(255,192,0 ,0.4) 0%,rgba(255,230,48,0.2) 60%),
-webkit-linear-gradient(40deg, rgba(255,0,0,0.3) 0%,rgba(0,0,0,0) 55%);
display: table;
margin: 0 auto;
}
En primer lugar una sombra interior inset para "levantar" un poco la fotografía.
El fondo formado por dos gradientes, uno linear y el otro angular, para "matar" un poco el blanco con otros tonos decrecientes y cruzados en alguna zona.
display: table; : Con este valor uno se olvida del tamaño de la foto y no hay que dar medidas a su contendor, sabiendo que nuestro div se va a ajustar al tamaño de la foto.
Y eso es todo lo que se necesita. Puedes experimentar un poco más, añadiendo un border-image (1 y 2) a la foto para orlarla o algún gradiente.
El resultado final, en vivo para webkit, que es lo que estas esperando desde que llegaste, es el que ves abajo:Más info y créditos:
- Origen de la imagen: lorempixel
- En este blog: los filtros Css y el shadow-box.
- Artículos similares: De Chris Spooner
- También puedes intentarlo por otras vías. Algún js hay por ahí.
, gradientes y box-shadow es todo lo que se necesita.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Excelente artículo brother.
ResponderEliminarSaludos!