Ajustando la imagen el Resplandor y el Contraste, o convertir en la imagen en la Escala de gris o Sephia son un rasgo común usted puede encontrar en el uso de edición de imágenes, como la Fototienda.
Pero, es ahora posible añadir los mismos efectos a imágenes de web que usan CSS. Esta capacidad viene de los Efectos Con filtro que en realidad son todavía en la etapa Trabajador Preliminar.
Sin embargo, el navegador Webkit parece ser un paso una cabeza en la realización de este rasgo. Tan, vaya a darle un intento y usaremos esta imagen de Mehdi Kh a la demostración de los efectos.
Los Efectos
La aplicación de los efectos es muy fácil. Mire al trocito debajo, para convertirse en imágenes en la escala de gris;
img {
-webkit-filter: grayscale(100%);
}
…y esto es para la sepia ala Instagram.
img {
-webkit-filter: sepia(100%);
}
Tanto la sepia como los valores de escala de gris son declarados en el porcentaje donde el 100 % es el máximo y la aplicación del 0 % guardará el incambio de imagen, pero cuando el valor explícitamente no es especificado el 100 % será tomado como la falta.
El mejoramiento de la imagen es también posible, y podemos hacerlo por usando la función de resplandor, así; como la falta.
img {
-webkit-filter: brightness(50%);
}
El efecto de resplandor trabaja como el contraste y el efecto de sepia encima donde el valor del 0 % guardará la imagen como es y la aplicación del 100 % totalmente se mejorará la imagen, que posiblemente mostraría sólo una página en blanco blanca en vez de una imagen.
El efecto de resplandor también permite para valores negativos, en los cuales esto oscurecerá la imagen.
img {
-webkit-filter: brightness(-50%);
}
.. y podemos ajustar el contraste de imagen este camino.
img {
-webkit-filter: contrast(200%);
}
Hay una pequeña diferencia sobre como el valor trabaja también, como usted puede ver en el susodicho, ponemos el contraste () en el 200 %, esto es porque el valor del 100 % es el punto de partida donde la imagen permanecerá inalterada. Cuando el valor es debajo del 100 %, digamos el 50 %, la imagen se hará menos contrastado.
Además, también podemos combinar el efecto en un bloque de declaración, como en el ejemplo debajo. Nos convertimos en la imagen en la escala de gris y aumentamos el contraste en el 50 % al mismo tiempo.
img {
-webkit-filter: grayscale(100%) contrast(150%);
}
Por combinando el filtro con la transición CSS3 podemos hacer un efecto de planeo lleno de gracia.
img:hover {
-webkit-filter: grayscale(0%);
}
img:hover {
-webkit-filter: sepia(0%);
}
img:hover {
-webkit-filter: brightness(0%);
}
img:hover {
-webkit-filter: contrast(100%);
}
Finalmente, hay uno más efecto que podemos intentar; el Aspecto borroso Gaussiano, que enturbiará el elemento apuntado.
img:hover {
-webkit-filter: blur(5px);
}
Como en la Photoshop, el valor de aspecto borroso es declarado en el radio de pixel y si el valor explícitamente no es declarado, el <0 será tomado como la falta y la imagen es dejada como es.
Si les gusto no olviden de comentar o recomendarlo o dejar puntos
