Last Updated: February 25, 2016
·
1.287K
· smeranda

LESS functions for CSS3 image filters

Inspired by Marco's CSS3 image filter post (http://coderwall.com/p/ruaoig), I've put together a supporting LESS function:

// 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;
}

Usage:

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