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
Cursos gratuitos para formarte como docente
Si quieres aprender técnicas de impartición, tutorización, evaluación, incluso orientar laboralmente en acciones formativas para el empleo, en Nowe tenemos plazas libres para cursar, de forma gratuita, los tres últimos módulos formativos incluidos en el Certificado...
Docencia de la Formación Profesional para el Empleo
Si quieres dar un cambio en tu perfil profesional y acceder al mercado laboral, realiza este Certificado y trabaja como formador. En Nowe vamos a impartir el Certificado de Profesionalidad de Docencia de la Formación Profesional para el Empleo. Nos quedan plazas...
Curso gratuito de programación.
Curso gratuito de programación para desempleados y con titulación oficial, en Nowe. La demanda de programadores en empresas de Madrid, Barcelona, Valencia, etc ha crecido en torno a un 60%. Y como resultado de la actual crisis del COVID-19 se ha acelerado el proceso...
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.