Filters CSS

1.- Filtros disponilbles:

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

Multiples filtros se pueden utilizar separándolos por un espacio.

SINTAXIS

.nombreClaseFiltro {
filter: <filter-function> [<filter-function>]* | none
}

Ejemplo:

.blur-me {
filter: blur(20px);
}

Ejemplo Multiples propiedades:

.do-more-things {
filter: blur(20px) grayscale(20%);
}

Imagen sin Filtro

Blur

Combinando filtros

.do-more-things {
filter: blur(20px) grayscale(50%);
}

Valores

filter: grayscale([ <number> | <percentage> ])

filter: sepia([ <number> | <percentage> ])

filter: saturate([ <number> | <percentage> ])

filter: hue-rotate(<angle>)

filter: invert([ <number> | <percentage> ])

filter: opacity([ <number> | <percentage> ])

filter: brightness([ <number> | <percentage> ])

filter: contrast([ <number> | <percentage> ])

filter: blur(<length>)

filter: drop-shadow(<length>{2,3} <color>?)

LINKS de referencia

http://bennettfeely.com/filters/

https://css-tricks.com/almanac/properties/f/filter/

https://drafts.fxtf.org/filters/#intro

http://html5-demos.appspot.com/static/css/filters/index.html

https://www.html5rocks.com/en/tutorials/filters/understanding-css/

http://webplatform.adobe.com/filter-effects/