soy Kseso y esto EsCSS

Fotos vintage o retro sólo con Css. Aplicación práctica de filter

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

·Por Kseso ✎ 1

¿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:

  1. Origen de la imagen: lorempixel
  2. En este blog: los filtros Css y el shadow-box.
  3. Artículos similares: De Chris Spooner
  4. También puedes intentarlo por otras vías. Algún js hay por ahí.

avatar del Editor del blog

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 Don Kseso Kseso