Una de las mejores maneras de hacer atractivo nuestro sitio o aplicación es el uso de filtros, esto es algo que ha venido a revolucionar el manejo de navegadores, ya que por medio de CSS podemos aplicar filtros a las imágenes, sobre todo a las imágenes Bitmap, tal como si lo hiciéramos con Photoshop pero al vuelo.
Filtros de escala de grises y blanco y negro.
<style> img{ border: 20px solid:#fff; box-shadow: 10px 10px 8px rgba(0,0,0,0.3);} img.bw{ -webkit-filter: grayscale(1); transition: 1s all linear; } img.bw:hover{ -webkit-filter: grayscale(0); } </style> <body> <img src=images/playa1.jpg alt="Casa en la Playa" class=bw width="400px" height=“300px">
Filtro Sepia con transicion.
Ahora pongamos la misma fotografía pero le aplicamos un efecto de Sepia.
<style> img.sepia{ -webkit-filter: sepia(1); transition: 1s all linear; } img.sepia:hover{ -webkit-filter: sepia(0); } </style> <body> <img src=images/playa1.jpg alt="Casa en la Playa" class=sepia width="400px" height=“300px"> <body>
Ahora pongamos un poco de alcohol a nuestro desarrollo, es Broma, vamos a darle el efecto Blur.
Claro que tomando en cuenta lo fácil que es realizar o aplicar estos efectos lo mas sencillo puede usar, así como:
Blur
blur () = blur ( < longitud > )
Aplica un desenfoque gaussiano a la imagen de entrada . El parámetro pasado (el radio ) define el valor de la desviación estándar de la función de Gauss. El parámetro se especifica una longitud CSS , pero no acepta los valores porcentuales. El equivalente de marcado de esta función es la siguiente.
Brillo
brightness ( ) = brightness( [< número> | <porcentaje >] )
Se aplica un multiplicador lineal imagen de entrada para , haciendo que parezca más o menos brillante . Un valor de 0 % creará una imagen que es completamente negro . Un valor de 100 % deja la entrada sin cambios. Otros valores son multiplicadores lineales en el efecto . Los valores de cantidad superior al 100% se les permite , proporcionando resultados más brillantes. El equivalente de marcado de esta función es la siguiente.
Contraste
contrast() = contrast( [ <number> | <percentage> ] )
Ajusta el contraste de la entrada. Un valor de 0 % creará una imagen que es completamente gris. Un valor de 100 % deja la entrada sin cambios. Los valores de cantidad de más de 100 % se les permite , proporcionando resultados con más contraste. El equivalente de marcado de esta función es la siguiente.
Aplicar Sombra
drop-shadow() = drop-shadow( <length>{2,3} <color>? )
Aplica un efecto de sombra a la imagen de entrada . Una sombra es en realidad una versión borrosa, desplazamiento de la máscara alfa de la imagen de entrada dibujada en un color particular , compuesta por debajo de la imagen. Los valores se interpretan como para box-shadow .
Escalas de Grises
grayscale() = grayscale( [ <number> | <percentage> ] )
Convierte la imagen de entrada a escala de grises . El parámetro pasado define la proporción de la conversión. Un valor de 100 % es completamente escala de grises. Un valor de 0 % sale de la entrada sin cambios. Los valores entre 0 % y 100 % son multiplicadores lineales en el efecto. Los valores de cantidad de más de 100 % son permitidos, pero las AU deben sujetar los valores a 1.
Efecto rotación HUE
hue-rotate() = hue-rotate( <angle> )
Aplica un giro de tonos en la imagen de entrada . El parámetro pasado define el número de grados alrededor del círculo de color se ajustarán las muestras de entrada . Un valor de 0deg deja la entrada sin cambios. Implementaciones no deben normalizar este valor con el fin de permitir que las animaciones más allá 360deg
Efecto de Invertir colores
invert() = invert( [ <number> | <percentage> ] )
Invierte la muestras en la imagen de entrada . El parámetro pasado define la proporción de la conversión. Un valor de 100 % está totalmente invertido . Un valor de 0 % sale de la entrada sin cambios. Los valores entre 0 % y 100 % son multiplicadores lineales en el efecto.
Opacidad
opacity() = opacity( [ <number> | <percentage> ] )
Se aplica la transparencia de las muestras en la imagen de entrada . El parámetro pasado define la proporción de la conversión. Un valor de 0 % es totalmente transparente . Un valor de 100 % deja la entrada sin cambios. Los valores entre 0 % y 100 % son multiplicadores lineales en el efecto. Esto es equivalente a multiplicar las muestras de imagen de entrada por esa cantidad .
Saturación
saturate() = saturate( [ <number> | <percentage> ] )
Satura la imagen de entrada. El parámetro pasado define la proporción de la conversión. Un valor de 0 % es completamente no- saturado . Un valor de 100 % deja la entrada sin cambios. Otros valores son multiplicadores lineales en el efecto . Los valores de cantidad superior al 100% se les permite , proporcionando resultados de super – saturado .
Sepia
sepia() = sepia( [ <number> | <percentage> ] )
Convierte la imagen de entrada a la sepia. El parámetro pasado define la proporción de la conversión. Un valor de 100 % es completamente sepia. Un valor de 0 % sale de la entrada sin cambios. Los valores entre 0 % y 100 % son multiplicadores lineales en el efecto. Los valores de cantidad de más de 100 % son permitidos, pero las AU deben sujetar los valores a 1.
Creo que esto nos ayuda bastante a entender el porque las capacidades de CSS se han convertido en un MUST en lo que se refiere a programación de sitios y aplicaciones.
[wpdm_package id=3645 template=”link-template-default.php”]