Filtros con CSS3

Abr 29, 2014Artículos, Tutoriales1 Comentario

Aunque aún no es una propiedad estándar y no funciona en todos los navegadores, la propiedad filter de CSS3 nos permite añadir interesantes filtros similares a los que podemos usar en Photoshop tanto a imágenes como a otros elementos HTML. Los filtros básicamente nos van a servir para modificar el color, pudiendo jugar con el tono, la saturación, contraste, etc y luego además tenemos un filtro de desenfoque que seguro nos va a dar mucho juego. Es muy sencillo aplicarlos y vamos a ver cómo se hace y qué filtros tenemos disponibles:

Filtros directamente sobre imágenes

Lo primero que vamos a hacer es introducir una imagen en nuestro documento html cortesía de nuestro genio Felix Tavares:

detalle floresPara usar los filtros css es importante saber que de momento solo se verán en navegadores webkit, como chrome y safari, por lo que debemos usar los correspondientes prefijos a la hora de crear el estilo CSS:

img {
-webkit-filter: filter(valor);
}

Cambio de tono: hue-rotate

Podemos modificar el tono de nuestra imagen con el filtro hue-rotate. El tono de un color es la posición que le corresponde a ese color dentro del círculo cromático (por eso se especifica en grados)  y determina si es un tono de azul, rojo, amarillo… Se lo aplicamos de la siguiente manera:

img {
-webkit-filter: hue-rotate(90deg);>
}

detalle flores

Escala de grises: grayscale

También podemos directamente pasar una imagen a escala de grises utilizando el filtro grayscale en nuestro CSS. No solo eso, como básicamente lo que hace el filtro es desaturar la imagen podemos elegir la cantidad de pérdida de saturación entre 0 y 100%, siendo 100% gris total:

img {
-webkit-filter: grayscale(100%);
}

detalle flores

Tono sepia: sepia

Como en Instagram! puedes aplicar directamente el filtro sepia y también graduar, de 0 a 100% la intensidad del efecto:

img {
-webkit-filter: sepia(100%);
}

detalle flores

Cambio de brillo: brightness

Variando el porcentaje de brillo podemos aclarar u oscurecer la imagen. Un 100% deja la imagen sin cambios, los valores menores que 100% la oscurecen y los mayores aclaran. En el ejemplo hemos puesto un 200% y veis la imagen bastante más brillante:

img {
-webkit-filter: brightness(200%);
}

detalle flores

Cambio de contraste: contrast

También podemos ajustar el contraste de la imagen para que se vea más o menos viva. Los valores funcionan igual que en brightness: 100% sin cambios, menor que 100% reduce el contraste (0% sería un gris plano) y valores mayores que 100% lo aumentan. En el ejemplo bajamos el contraste a la mitad:

img {
-webkit-filter: contrast(50%);
}

detalle flores

Invertir colores: invert

Invertir un color es cambiar ese color por su complementario. Por ejemplo, en una imagen en la que predominen los tonos rojos, al invertirla se verá azulada. Al usar el filtro invert también podemos graduar la intensidad de la inversión de colores con un valor en porcentaje. En el ejemplo invertimos la imagen del todo:

img {
-webkit-filter: invert(100%);
}

detalle flores

Desenfoque: blur

Vaya, ahora que se lleva el diseño plano me entero que se pueden desenfocar elementos directamente en CSS! Seguro que le vas a sacar partido, en este caso igual que en Photoshop cuando aplicamos un desenfoque gaussiano solo tenemos que especificar el radio en pixels:

img {
-webkit-filter: blur(5px);
}

detalle flores

Combinando filtros

Se pueden aplicar varios filtros a nuestra imagen, es tan sencillo como declararlos en la propiedad filter:

img {
-webkit-filter: blur(5px) grayscale(75%);
}

En el ejemplo desenfocamos la imagen un poco y la desaturamos un 75%

detalle flores

Esperamos que os haya resultado interesante, hay muchas opciones si usamos los filtros junto con animaciones y transiciones y lo más importante, cada vez dependemos menos de usar distintas imágenes a la que aplicamos estos filtros en Photoshop, ya que podemos hacerlo directamente en CSS.

Nos vemos en Nowe!

TE PUEDE INTERESAR

El mundo de la ilustración:  Más allá de los dibujos.

El mundo de la ilustración: Más allá de los dibujos.

El mundo de la ilustración: Más allá de los dibujos. El fascinante mundo de la ilustración es algo más que hacer dibujos. Se trata de una profesión artística con un altísimo componente creativo que se puede adaptar a muchas necesidades de comunicación de las empresas....

Ilustración al detalle. Kashe Gómez.

Ilustración al detalle. Kashe Gómez.

  El poder de una ilustración al detalle Una ilustración bien hecha suele gustar a todos pero cuando miras detenidamente y descubres ciertos detalles, esa obra se queda en tu memoria. Tenemos un ejemplo claro en algunas de las ilustraciones que nos ha enseñado...

Toño Sépul. Constancia y esfuerzo para un trabajo bien hecho.

Toño Sépul. Constancia y esfuerzo para un trabajo bien hecho.

Antonio Foguet es Toño Sépul, un diseñador con mucha imaginación y una capacidad de trabajo que le hace ser muy eficaz en todos los proyectos en los que participa. Alumno del Certificado de Ilustración, ya realizó Diseño de Productos Gráficos en Nowe. Hoy hablamos con...

Share This