Filtros con CSS3
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:
Para 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);> }
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%); }
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%); }
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%); }
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%); }
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%); }
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); }
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%
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
Certificado de profesionalidad de impresión digital
Dentro de la nueva programación de cursos en Nowe, tenemos el Certificado de profesionalidad de impresión digital. Se trata de un curso con titulación oficial que te prepara para cubrir uno de los puestos más demandados en el sector gráfico. 100% gratuito para...
Luis Toledo, Laprisamata
Luis Toledo, laprisamata. La esencia del detalle. Luis Toledo es laprisamata. Un artista madrileño que gracias a su peculiar estilo ha sido reconocido internacionalmente con el Wacom Awards, el Pantone Awards o el National Design Awards de Behance, también ha sido...
Ilustración para un artículo de prensa
La ilustración para un artículo de prensa es uno de los desarrollos más importantes para un ilustrador. Libros, publicidad, prensa, etc. forman parte de este complejo sistema de comunicación en el que el equilibrio entre la palabra y la imagen es fundamental para la...
Qué pasada lo que se puede hacer ya con CSS3. A ver si el resto de los navegadores se ponen las pilas también con estas propiedades.