CSS Filter Effects

CSS_filter_effects.md

##Browser Compatibility

CSS filters are not currently supported in all browsers:

http://caniuse.com/#search=filters

For cross-browser compatibility, the image needs to be modified and uploaded in final form. CSS filters do, however, allow for quick testing of different filtering combos before editing an image with photo-editing software.

##Resources

CSS-Tricks article on CSS filters (including examples):

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

w3schools article on CSS filters:

http://www.w3schools.com/cssref/css3_pr_filter.asp

UI for generating CSS filters:

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

CSS_filter_effects_examples.css

/*
Test filter effects on a background image live on the 
site via CSS rather than relying on photo-editing 
software to modify the image for testing. 
*/

/* Live background */
/*body.home {
	background: url(images/bg-image-final.jpg) center top no-repeat;
	background-size: cover;
}*/
/* Test background filters */
body.home:before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	z-index: -1;
	display: block;
	background: url('bg-image-sample.jpg') no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	-webkit-filter: blur(1.5px) grayscale(100%) opacity(50%);
	filter: blur(1.5px) grayscale(100%) opacity(50%);
}