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));
Written by Seth Meranda
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#