Editar imágenes con CSS 3
Aunque pensaba colocar un título más GUAO "Haz a un lado Photoshop con CSS3" luego pensé que sería mejor el que tiene ahorita para futuras búsquedas. Bueno empezamos.
Se trata de "reemplazar" entre comillas al photoshop con el mismo CSS3, todo con código, en lo que se refiere a edición de imágenes como "brillo, opacidad, saturación, escala de grises, negativo, etc..".
Es un artículo que tengo desde hace varias semanas para datoweb, que vi y me impresionó mucho pero que no había tenido el tiempo para publicarlo.
Podemos editar tanto imágenes como divs con solo código de css. Vean como..
Imagen de Prueba - Sin filtro
Blur o Desenfoque
Escala de grises
Saturación
Invertido
Brillo
Negativo
Sepia
Contraste
Se trata de "reemplazar" entre comillas al photoshop con el mismo CSS3, todo con código, en lo que se refiere a edición de imágenes como "brillo, opacidad, saturación, escala de grises, negativo, etc..".
Es un artículo que tengo desde hace varias semanas para datoweb, que vi y me impresionó mucho pero que no había tenido el tiempo para publicarlo.
Podemos editar tanto imágenes como divs con solo código de css. Vean como..
Imagen de Prueba - Sin filtro
Blur o Desenfoque
img { filter:blur(5px); -webkit-filter:blur(5px); -moz-filter:blur(5px); -ms-filter:blur(5px); -o-filter:blur(5px); }Resultado
Escala de grises
img { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); }Resultado
Saturación
img { filter:saturate(150%); -webkit-filter:saturate(150%); -moz-filter:saturate(150%); -ms-filter:saturate(150%); -o-filter:saturate(150%); }Resultado
Invertido
img { filter:invert(100%); -webkit-filter:invert(100%); -moz-filter:invert(100%); -ms-filter:invert(100%); -o-filter:invert(100%); }Resultado
Brillo
img { filter:birghtness(150%); -webkit-filter:birghtness(150%); -moz-filter:birghtness(150%); -ms-filter:birghtness(150%); -o-filter:birghtness(150%); }Resultado
Negativo
img { filter:hue-rotate(20deg); -webkit-filter:hue-rotate(20deg); -moz-filter:hue-rotate(20deg); -ms-filter:hue-rotate(20deg); -o-filter:hue-rotate(20deg); }Resultado
Sepia
img { filter:sepia(100%); -webkit-filter:sepia(100%); -moz-filter:sepia(100%); -ms-filter:sepia(100%); -o-filter:sepia(100%); }Resultado
Contraste
img { filter:contrast(150%); -webkit-filter:contrast(150%); -moz-filter:contrast(150%); -ms-filter:contrast(150%); -o-filter:contrast(150%); }Resultado