Introducción a efectos de filtro con CSS3

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">

f000294

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>

 

f000294

 

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:

f000294

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”]

Volver arriba