Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
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
5
Puntos
4636
Visitas
0
Resp
Por Jose hace 121 meses
Experto Sitio web
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate