CSS Filters - TheMindSpeaks
What are CSS Filters?
According To CSS Tricks
CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser)
According To Web Designer Wall
CSS image filters are a quick way to tweak images in the browser without resorting to Photoshop.
But for us, they are a way to add a bit of spice.
In this video, we will learn
1. How CSS filters work
2. How many filters are supported
3. How to apply the filter
4. Combining filters and browser support for CSS filters
Let's begin with how do they work
When you feed browser with raw HTML CSS it renders it and displays it but when you add a filter, it adds another layer of processing after rendering and before displaying the image and this is where all magic happens, based of what filter you apply.
Now, that we know how CSS filters work but how many are really out there. CSS currently supports 10 filters. Namely
1. Blur
2. Brightness
3. Contrast
4. Drop Shadow
5. Grayscale
6. Hue-rotate
7. Invert
8. Opacity
9. Saturate
10. Sepia
Big List isn’t it. But how to apply these filters
Every filter we mentioned is a function which is accepted by filter property. And like a normal function, they work with parameters Most of them work with relative parameter values of original like % and in this video, we will be use % to keep things simple.
Meanwhile, blur accepts CSS unit values like px em rem etc. our rotate accepts angles to rotate the color wheel and drop shadow accepts same values as box-shadow but just a single value. Now its time to apply filters. (make background containing CSS units deep purple with overlayed units);
Imagine we have a hypothetical element with id filter-me
we select it then. Apply filter property with filter function of our choice and we can combine multiple filters by adding more than one filter function separated by space.
Make sure you remember changing the order of the filter, can affect output like this grayscale() sepia not equal to sepia() grayscale()
CSS Filters are supported by All major browsers except internet explorer.
---------------- GOOD STUFF
https://www.html5rocks.com/en/tutoria...
http://webdesignerwall.com/tutorials/...
https://css-tricks.com/almanac/proper...
---------------------------------------------- TheMindSpeaks's Social
Facebook Page - / themindspeakss
Twitter - / themindspeakss
Google ++ - https://plus.google.com/+Themindspeakss
---------------------------------------------- MY SOCIAL LINKS
Twitter - / sidtheangel
Instagram - / sidtheangell
Main Channel - https://goo.gl/DoS9Gc