🥇 LESS funções para filtros de imagem CSS3

Inspirado na postagem de filtro de imagem CSS3 de Marco ( http://coderwall.com/p/ruaoig ), eu criei uma função de suporte LESS:

// CSS3 Image Filters
//
//  As found at: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction
//
//  Options available include:
//  
//  grayscale(<number> | <percentage>)
//  sepia(<number> | <percentage>)
//  saturate(<number> | <percentage>)
//  hue-rotate(<angle>)
//  invert(<number> | <percentage>)
//  opacity(<number> | <percentage>)
//  brightness(<number> | <percentage>)
//  contrast(<number> | <percentage>)
//  blur(<length>)
//  drop-shadow(<shadow>)

.filter(@arguments) {
    -webkit-filter: @arguments;
       -moz-filter: @arguments;
        -ms-filter: @arguments;
         -o-filter: @arguments;
}

Uso:

.filter(blur(10px));
.filter(drop-shadow(rgba(0,0,0,0.3) 1px 1px 1px));

Related Posts