Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
CSS filters allow for various effects to be applied to elements, such as images and text.
Currently, only -webkit- browsers fully support the full set of filters. At present, Internet Explorer has its own set of filter functions. These are fully described at this link. At present, Firefox uses scalable vector graphics (SVG) to implement filters. SVG are fully described at this link. The example below shows how the blur filter can be made to be fully cross-browser compatible.
Example of cross-browser blur (Run Example)
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Blur */ #blur_min { -webkit-filter : blur(0px); -moz-filter : blur(0px); -ms-filter : blur(0px); -o-filter : blur(0px); filter : blur(0px); } #blur_middle { -webkit-filter : blur(5px); -moz-filter : blur(5px); -ms-filter : blur(5px); -o-filter : blur(5px); filter : blur(5px); } #blur_high { -webkit-filter : blur(10px); -moz-filter : blur(10px); -ms-filter : blur(10px); -o-filter : blur(10px); filter : blur(10px); } div.filter { position:relative; float:left; width : 250px; margin : 25px; text-align:center; } div.filter img { width : 100%; } h2 { padding-top:20px; border-top:thin solid #ccc; clear:both; } </style> <!-- Internet Explorer --> <!--[if IE]> <style> #blur_min { filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=0); } #blur_middle { filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5); } #blur_high { filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10); } </style> <![endif]--> <!-- Firefox --> <style> @-moz-document url-prefix() { #blur_min { filter: url(#blur_0); } #blur_middle { filter: url(#blur_5); } #blur_high { filter: url(#blur_10); } } </style> </head> <body> <h2>Blur</h2> <div class = "filter"><img id = "blur_min" src="images/dkit02.gif">blur(0px)</div> <div class = "filter"><img id = "blur_middle" src="images/dkit02.gif">blur(5px)</div> <div class = "filter"><img id = "blur_high" src="images/dkit02.gif">blur(10px)</div> <!-- Mozilla browsers do not currently support filters, so use svg instead --> <svg> <filter id="blur_0"><feGaussianBlur stdDeviation="0" /></filter> <filter id="blur_5"><feGaussianBlur stdDeviation="5" /></filter> <filter id="blur_10"><feGaussianBlur stdDeviation="10" /></filter> </svg> </body> </html>
The complete set of W3C CSS filters is shown below:
The following example shows all of the above filters.
NOTE 1, currently, this example will only run in -webkit- browsers, with the exception of the url filter, which will only run in Firefox.
Example showing the various CSS filters (Run Example)
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Blur */ #blur_min { -webkit-filter : blur(0px); -moz-filter : blur(0px); -ms-filter : blur(0px); -o-filter : blur(0px); filter : blur(0px); } #blur_middle { -webkit-filter : blur(5px); -moz-filter : blur(5px); -ms-filter : blur(5px); -o-filter : blur(5px); filter : blur(5px); } #blur_high { -webkit-filter : blur(10px); -moz-filter : blur(10px); -ms-filter : blur(10px); -o-filter : blur(10px); filter : blur(10px); } /* Brightness */ #brightness_min { -webkit-filter : brightness(0%); -moz-filter : brightness(0%); -ms-filter : brightness(0%); -o-filter : brightness(0%); filter : brightness(0%); } #brightness_middle { -webkit-filter : brightness(50%); -moz-filter : brightness(50%); -ms-filter : brightness(50%); -o-filter : brightness(50%); filter : brightness(50%); } #brightness_max { -webkit-filter : brightness(100%); -moz-filter : brightness(100%); -ms-filter : brightness(100%); -o-filter : brightness(100%); filter : brightness(100%); } /* Contrast */ #contrast_min { -webkit-filter : contrast(0%); -moz-filter : contrast(0%); -ms-filter : contrast(0%); -o-filter : contrast(0%); filter : contrast(0%); } #contrast_middle { -webkit-filter : contrast(50%); -moz-filter : contrast(50%); -ms-filter : contrast(50%); -o-filter : contrast(50%); filter : contrast(50%); } #contrast_max { -webkit-filter : contrast(100%); -moz-filter : contrast(100%); -ms-filter : contrast(100%); -o-filter : contrast(100%); filter : contrast(100%); } /* Drop Shadow */ #drop_shadow_min { -webkit-filter : drop-shadow(0px 0px 0px black); -moz-filter : drop-shadow(0px 0px 0px black); -ms-filter : drop-shadow(0px 0px 0px black); -o-filter : drop-shadow(0px 0px 0px black); filter : drop-shadow(0px 0px 0px black); } #drop_shadow_middle { -webkit-filter : drop-shadow(10px 10px 20px black); -moz-filter : drop-shadow(10px 10px 20px black); -ms-filter : drop-shadow(10px 10px 20px black); -o-filter : drop-shadow(10px 10px 20px black); filter : drop-shadow(10px 10px 20px black); } #drop_shadow_high { -webkit-filter : drop-shadow(10px 10px 60px black); -moz-filter : drop-shadow(10px 10px 60px black); -ms-filter : drop-shadow(10px 10px 60px black); -o-filter : drop-shadow(10px 10px 60px black); filter : drop-shadow(10px 10px 60px black); } /* Grayscale */ #grayscale_min { -webkit-filter : grayscale(0%); -moz-filter : grayscale(0%); -ms-filter : grayscale(0%); -o-filter : grayscale(0%); filter : grayscale(0%); } #grayscale_middle { -webkit-filter : grayscale(50%); -moz-filter : grayscale(50%); -ms-filter : grayscale(50%); -o-filter : grayscale(50%); filter : grayscale(50%); } #grayscale_max { -webkit-filter : grayscale(100%); -moz-filter : grayscale(100%); -ms-filter : grayscale(100%); -o-filter : grayscale(100%); filter : grayscale(100%); } /* Hue Rotate */ #hue_rotate_min { -webkit-filter : hue-rotate(0deg); -moz-filter : hue-rotate(0deg); -ms-filter : hue-rotate(0deg); -o-filter : hue-rotate(0deg); filter : hue-rotate(0deg); } #hue_rotate_middle { -webkit-filter : hue-rotate(90deg); -moz-filter : hue-rotate(90deg); -ms-filter : hue-rotate(90deg); -o-filter : hue-rotate(90deg); filter : hue-rotate(90deg); } #hue_rotate_high { -webkit-filter : hue-rotate(270deg); -moz-filter : hue-rotate(270deg); -ms-filter : hue-rotate(270deg); -o-filter : hue-rotate(270deg); filter : hue-rotate(270deg); } /* Invert */ #invert_min { -webkit-filter : invert(0%); -moz-filter : invert(0%); -ms-filter : invert(0%); -o-filter : invert(0%); filter : invert(0%); } #invert_middle { -webkit-filter : invert(50%); -moz-filter : invert(50%); -ms-filter : invert(50%); -o-filter : invert(50%); filter : invert(50%); } #invert_max { -webkit-filter : invert(100%); -moz-filter : invert(100%); -ms-filter : invert(100%); -o-filter : invert(100%); filter : invert(100%); } /* Opacity */ #opacity_min { -webkit-filter : opacity(0%); -moz-filter : opacity(0%); -ms-filter : opacity(0%); -o-filter : opacity(0%); filter : opacity(0%); } #opacity_middle { -webkit-filter : opacity(50%); -moz-filter : opacity(50%); -ms-filter : opacity(50%); -o-filter : opacity(50%); filter : opacity(50%); } #opacity_max { -webkit-filter : opacity(100%); -moz-filter : opacity(100%); -ms-filter : opacity(100%); -o-filter : opacity(100%); filter : opacity(100%); } /* Saturate */ #saturate_min { -webkit-filter : saturate(0%); -moz-filter : saturate(0%); -ms-filter : saturate(0%); -o-filter : saturate(0%); filter : saturate(0%); } #saturate_middle { -webkit-filter : saturate(50%); -moz-filter : saturate(50%); -ms-filter : saturate(50%); -o-filter : saturate(50%); filter : saturate(50%); } #saturate_max { -webkit-filter : saturate(100%); -moz-filter : saturate(100%); -ms-filter : saturate(100%); -o-filter : saturate(100%); filter : saturate(100%); } /* Sepia */ #sepia_min { -webkit-filter : sepia(0%); -mos-filter : sepia(0%); -ms-filter : sepia(0%); -o-filter : sepia(0%); filter : sepia(0%); } #sepia_middle { -webkit-filter : sepia(50%); -mos-filter : sepia(50%); -ms-filter : sepia(50%); -o-filter : sepia(50%); filter : sepia(50%); } #sepia_max { -webkit-filter : sepia(100%); -mos-filter : sepia(100%); -ms-filter : sepia(100%); -o-filter : sepia(100%); filter : sepia(100%); } /* url */ #url_min { -webkit-filter: url(#blur_0); -moz-filter: url(#blur_0); -ms-filter: url(#blur_0); -o-filter: url(#blur_0); filter: url(#blur_0); } #url_middle { -webkit-filter: url(#blur_5); -moz-filter: url(#blur_5); -ms-filter: url(#blur_5); -o-filter: url(#blur_5); filter: url(#blur_5); } #url_high { -webkit-filter: url(#blur_10); -moz-filter: url(#blur_10); -ms-filter: url(#blur_10); -o-filter: url(#blur_10); filter: url(#blur_10); } div.filter { position:relative; float:left; width : 250px; margin : 25px; text-align:center; } div.filter img { width : 100%; } h2 { padding-top:20px; border-top:thin solid #ccc; clear:both; } </style> </head> <body> <h2>Blur</h2> <div class = "filter"><img id = "blur_min" src="images/dkit02.gif">blur(0px)</div> <div class = "filter"><img id = "blur_middle" src="images/dkit02.gif">blur(5px)</div> <div class = "filter"><img id = "blur_high" src="images/dkit02.gif">blur(10px)</div> <h2>Brightness</h2> <div class = "filter"><img id = "brightness_min" src="images/dkit02.gif">brightness(0%)</div> <div class = "filter"><img id = "brightness_middle" src="images/dkit02.gif">brightness(5%)</div> <div class = "filter"><img id = "brightness_max" src="images/dkit02.gif">brightness(100%)</div> <h2>Contrast</h2> <div class = "filter"><img id = "contrast_min" src="images/dkit02.gif">contrast(0%)</div> <div class = "filter"><img id = "contrast_middle" src="images/dkit02.gif">contrast(50%)</div> <div class = "filter"><img id = "contrast_max" src="images/dkit02.gif">contrast(100%)</div> <h2>Drop shadow</h2> <div class = "filter"><img id = "drop_shadow_min" src="images/dkit02.gif">drop-shadow(0px 0px 0px black)</div> <div class = "filter"><img id = "drop_shadow_middle" src="images/dkit02.gif">drop-shadow(10px 10px 20px black)</div> <div class = "filter"><img id = "drop_shadow_high" src="images/dkit02.gif">drop-shadow(10px 10px 60px black)</div> <h2>Grayscale</h2> <div class = "filter"><img id = "grayscale_min" src="images/dkit02.gif">grayscale(0%)</div> <div class = "filter"><img id = "grayscale_middle" src="images/dkit02.gif">grayscale(50%)</div> <div class = "filter"><img id = "grayscale_max" src="images/dkit02.gif">grayscale(100%)</div> <h2>Hue Rotate</h2> <div class = "filter"><img id = "hue_rotate_min" src="images/dkit02.gif">hue-rotate(90deg)</div> <div class = "filter"><img id = "hue_rotate_middle" src="images/dkit02.gif">hue-rotate(180deg)</div> <div class = "filter"><img id = "hue_rotate_high" src="images/dkit02.gif">hue-rotate(270deg)</div> <h2>Invert</h2> <div class = "filter"><img id = "invert_min" src="images/dkit02.gif">invert(0%)</div> <div class = "filter"><img id = "invert_middle" src="images/dkit02.gif">invert(50%)</div> <div class = "filter"><img id = "invert_max" src="images/dkit02.gif">invert(100%)</div> <h2>Opacity</h2> <div class = "filter"><img id = "opacity_min" src="images/dkit02.gif">opacity(0%)</div> <div class = "filter"><img id = "opacity_middle" src="images/dkit02.gif">opacity(50%)</div> <div class = "filter"><img id = "opacity_max" src="images/dkit02.gif">opacity(100%)</div> <h2>Saturate</h2> <div class = "filter"><img id = "saturate_min" src="images/dkit02.gif">saturate(0%)</div> <div class = "filter"><img id = "saturate_middle" src="images/dkit02.gif">saturate(50%)</div> <div class = "filter"><img id = "saturate_max" src="images/dkit02.gif">saturate(100%)</div> <h2>Sepia</h2> <div class = "filter"><img id = "sepia_min" src="images/dkit02.gif">sepia(0%)</div> <div class = "filter"><img id = "sepia_middle" src="images/dkit02.gif">sepia(50%)</div> <div class = "filter"><img id = "sepia_max" src="images/dkit02.gif">sepia(100%)</div> <h2>url (Only work in Firefox)</h2> <div class = "filter"><img id = "url_min" src="images/dkit02.gif">url blur(0px)</div> <div class = "filter"><img id = "url_middle" src="images/dkit02.gif">url blur(5px)</div> <div class = "filter"><img id = "url_high" src="images/dkit02.gif">url blur(10px)</div> <svg> <filter id="blur_0"><feGaussianBlur stdDeviation="0" /></filter> <filter id="blur_5"><feGaussianBlur stdDeviation="5" /></filter> <filter id="blur_10"><feGaussianBlur stdDeviation="10" /></filter> </svg> </body> </html>
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.