A Detailed Discussion Over CSS Filters

Little About This Post

without the discussion of CSS Filters, the story started with two previous blog posts

A Detailed Discussion Over Exploring CSS Refreshers : Borders

A Detailed Discussion Over CSS Preprocessors

would have not completed, so i came to know much more in exploration from one of my favourite blogger, Writer Jeffrey Way. then getting some and writing more about the topic could be a beneficial approach for all visitors.

Tutorial Details

Earlier this month, a new specification, Filter Effects 1.0, was released. It presents some exciting new Photoshop-like effects that we can use in the browser. Even better, Webkit has already landed support (in the nightlies)!


According to the Spec…

“A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output.”

Now, at least at this point, I wouldn’t presume to be able to show you everything that’s possible with these new filters. I’m still learning them myself! That said, I’ll show you a handful of the new filters, how we can use them in our projects, and then, hopefully, we can all brainstorm and learn from each other within the comments. Let’s get started.

Filters are typically associated with images (though they can also be applied to video). As such, for the handful of demos below, we’ll be using the Nettuts+ logo as input.

Nettuts+ Logo

Remember: these effects aren’t yet available in the public releases of Webkit browsers. For now, download Canary when testing these demos.


hue-rotate

Ever played around with the Hue/Saturation panel in Photoshop? Well now you can play around with it in the browser.

  1. img {
  2.    -webkit-filter: hue-rotate(50deg);
  3. }

If specifying this value in degrees seems confusing, just imagine a color wheel. The number of degrees you specify determines where that wheel stops. This means, that 0deg won’t do a thing, while 50deg will turn the dial, accordingly.

In this case, the Nettuts+ logo will take on a blu-ish hue.

Or, let’s say that you want your image to continuously change colors. Likely, in a real-world project, the color transitions will be far more subtle, but for this demo, we’ll be a bit obnoxious.

  1. img {
  2.    -webkit-animation: adjustHue 1s alternate infinite;
  3. }
  4. @-webkit-keyframes adjustHue {
  5.    0% { -webkit-filter: hue-rotate(30deg); }
  6.    50% { -webkit-filter: hue-rotate(60deg); }
  7.    100% { -webkit-filter: hue-rotate(90deg); }
  8. }

Simple enough. View Demo


grayscale

We’ve used a variety of hacks in the past to transition an image from black and white to color in the browser. One technique calls for two images stacked on top of one another. Another option is to use canvas. Or… we can use the grayscale filter.

  1. img {
  2.    -webkit-filter: grayscale(100%);
  3. }

When applying a percentage to the grayscale function, just think to yourself, “On a scale of 0 to 100%, how gray do I want this image to be?

When used in tandem with CSS3 transitions, we can apply a nice and clean hover effect.

  1. img {
  2.   -webkit-transition: -webkit-filter 1s;
  3. }
  4. img:hover {
  5.     -webkit-filter: grayscale(100%);
  6. }

In the future, you’ll want to provide prefixes for the other browsers, however, it’s not necessary at this point. No need in applying Mozilla transitions to accomodate for a filter that’s only implemented in Webkit (so far).

View Demo


sepia

Enjoy the sepia-flavored Instagram effect? Let’s see what Nettuts+ looked like in the old west.

  1. img {
  2.       -webkit-filter: sepia(100%);
  3. }

Typically, though, this effect is applied to photos. Let’s see how the greatest artist who ever lived looks in sepia.

Excellent.


blur

By passing a radius, we can blur an image in the browser with ease.

  1. img {
  2.       -webkit-filter: blur(2px);
  3. }

Or by upping the blur radius to 50px.


brightness

We use the brightness filter to specify…wait for it…how bright the input image should appear.

  1. img {
  2.       -webkit-filter: brightness(15%);
  3. }

Think of 100% as home base. brightness(100%) keeps the image unchanged. As we reduce this percentage, however, the image will continue to darken.

Don’t forget: you can combine all of these filters.

  1. img {
  2.       -webkit-filter: brightness(60%) sepia(100%);
  3. }

contrast

We can now adjust the contrast of an image quite easily.

  1. img {
  2.       -webkit-filter: contrast(200%);
  3. }

Once again, think of 100% as resting position. We can then reduce or increase this value to adjust the contrast of the image. According to the spec, applying a value of 0% should make the image 100% black, similar to what you might expect from -webkit-filter: brightness(0%);. However, I’m seeing more of a dark gray.

  1. img {
  2.       -webkit-filter: contrast(0%);
  3. }

Now if we up the percentage considerably, to 2000%:

  1. img {
  2.       -webkit-filter: contrast(2000%);
  3. }

Just for fun, let’s create a throbbing Matrix version of the Nettuts+ logo. We’ll combine CSS3 animations and filters.

  1. img {
  2.     -webkit-animation: bluePill 1s alternate infinite;
  3. }
  4. @-webkit-keyframes bluePill {
  5.    0% { -webkit-filter: contrast(2000%); }
  6.    100% { -webkit-filter: contrast(100%); }
  7. }

View Demo


invert

Mac users: press Control + Option + Command + 8. Notice how it inverts your screen (of course you noticed). I use this trick late at night when I’m reading on the computer, and my eyes are sore.

By applying a percentage of 100 to the new invert filter, we can achieve the exact same effect.

  1. img {
  2.       -webkit-filter: invert(100%);
  3. }

Note that 0% will leave the image unchanged.

Now, you could technically apply this to, say, the body of your website, and it would work. However, you’ll notice considerable slow down, and lose the ability to scroll the page. AKA – Don’t do it, except for fun.


saturate

In addition to setting grayscale(100%), we could also achieve a similar effect by desaturating the image entirely.

In this case, 100% is the unchanged state, at which point you can either decrease or increase this value. As such, reducing this value to 0% should remove all color from the image.

  1. img {
  2.       -webkit-filter: saturate(0%);
  3. }

Or, by upping the value to 700%:


That’s All For Now

Stay tuned to this article over the course of the next week. As these techniques are still super new, we all need time to figure out how to use them. I’ll update this article as I learn more!

Advertisements

43 responses to this post.

  1. Posted by michaelt on April 13, 2012 at 12:09 am

    We’re a group of volunteers and starting a new scheme in our community. Your web site provided us with valuable info to work on. You’ve done a formidable job and our entire community will be grateful to you.
    find more info

  2. This is really fascinating, You are an overly professional blogger. I’ve joined your feed and look forward to looking for more of your great post. Additionally, I have shared your site in my social networks

  3. I enjoyed your rich writing. super contribution. I hope you produce others. I will carry on subscribing

  4. You have remarked very interesting details! ps nice site.

  5. Greetings! I know this is kind of off topic but I was wondering which blog platform are you using for this website? I’m getting fed up of WordPress because I’ve had problems with hackers and I’m looking at options for another platform. I would be great if you could point me in the direction of a good platform.

  6. Hello there I am so happy I found your site, I really found you by mistake, while I was browsing on Google for something else, Nonetheless I am here now and would just like to say thank you for a tremendous post and a all round entertaining blog (I also love the theme/design), I don’t have time to look over it all at the minute but I have bookmarked it and also included your RSS feeds, so when I have time I will be back to read more, Please do keep up the awesome work.

  7. I want to inform that after perusal of one’s post I’ve found a lot of interesting a thing in your blog, and i genuinely like it. Watch for great work!

  8. We are heading to try to fix the mailing address/billing address thing.

  9. many thanks, it’s simply accessible and has countless awesome ideas and tips. the primary of my 2 favorite options are the pages where they’ll begin with an item or a handful of things that function inspiration for the space, then depth how the house owner used those things to form a novel and well-styled house.
    Online affiliates are alternative net sites that refer their own customers to a different business’s internet site…study a lot of at howtomakemoneywithaffiliate.blogspot.com

  10. Terrific info. Thanks for posting!

  11. Just to let you know your web-site appears a little bit strange on Firefox on my netbook with Linux .

  12. Have you considered including some social bookmarking links to these blogs. At the very least for myspace.

  13. I experimented with looking at your blog on my cellphone and the structure doesnt seem to be right. Might wanna check it out on WAP as well as it seems most cellphone layouts are not working with your website.

  14. I Am Going To have to return again when my course load lets up – nevertheless I am taking your Rss feed so i could read your blog offline. Thanks.

  15. Im getting a browser error, is anyone else?

  16. Do you have a spam concern on this internet site; I also am a blogger, and I was questioning your scenario; weve developed some good approaches and were looking to swap solutions with other folks, be positive to blast me an e-mail if interested.

  17. Cool post . Thank you for, commenting on my blog man! Ill email you again! I did not know that!

  18. Have you given any consideration at all with translating your current web site in to German? I know a couple of of translaters here which would certainly help you do it for free if you wanna contact me.

  19. Cool post ! Thanks for, visiting my blog mate! I will email you some time! I did not know that.

  20. Im getting a browser error, is anyone else?

  21. Have you considered including several social bookmarking links to these blogs. At the very least for myspace.

  22. I Am Going To have to come back again whenever my course load lets up – nevertheless I am taking your Rss feed so i could read your site offline. Cheers.

  23. Hi, I just hopped over to your site thru StumbleUpon. Not somthing I might usually browse, but I enjoyed your thoughts none the less. Thanks for creating something well worth reading through.

  24. Im having a tiny problem. I cant get my reader to pickup your feed, Im using msn reader by the way.

  25. Make money on new film releases! Meet the James Bond of Social Networking. Would you like to be the first person out of the gate to make money on feature film releases? http://www.nutvnetwork.com/paybackjackaffiliate.html

  26. Posted by This really answered my problem, thank you! on July 4, 2012 at 2:36 pm

    This really answered my problem, thank you!

  27. I cherished up to you will obtain performed proper here. The caricature is tasteful, your authored subject matter stylish. nonetheless, you command get got an nervousness over that you want be turning in the following. sick indubitably come further earlier again as precisely the same just about a lot ceaselessly inside case you protect this increase.

  28. One more important area is that if you are an older person, travel insurance regarding pensioners is something you should make sure you really take into consideration. The more aged you are, a lot more at risk you will be for having something negative happen to you while in another country. If you are not really covered by quite a few comprehensive insurance cover, you could have a number of serious issues. Thanks for sharing your hints on this blog.

  29. black annal sex movies sexy blacks femmes younger babes fucking
    http://xaijo.com/?profile-CARL
    http://adultgalls.com/?girl-OLA
    http://adultgalls.com/?profile-ANTOINETTE

    dog sex extreme movie videos e filmes oral sex brutal blowjobs dance india dance episodes veronica rayne anal on couch bonnie simon fucking instinct rar gay ball licking cum eating porn blonde hottie site:slutload.com the hun adult yellow pages floyd e sagely,l natural gas “ice cream sex” porn
    http://bitly.xaijo.com/oallrF

  30. Having read this I thought it was extremely informative. I appreciate you spending some time and effort to put this short article together. I once again find myself spending a lot of time both reading and commenting. But so what, it was still worth it!

  31. hey buddy, this can be a really exciting post

  32. Posted by byncjeorkcync on October 9, 2012 at 8:39 pm

    In the event you really feel your height allows you to down, in the event you feel that being of a lesser height than typical is holding you back or if your lack of stature brings you feelings of low esteem or self worth, then heel Lifts might be the answer
    shoes lifts for uneven legs
    http://mbaprep.co.in/groups/mbt-and-skechers-lady-shoes-online-while-in-dubai/

  33. Wow! This can be one particular of the most helpful blogs We have ever arrive across on this subject. Basically Great. I am also a specialist in this topic so I can understand your effort.

  34. You’re my function designs. Thank you for that post

  35. It’s hard to find well-informed people on this topic, however, you sound like you know what you’re talking about! Thanks

  36. I have discovered some new points from your website about computers. Another thing I have always assumed is that computer systems have become a specific thing that each home must have for a lot of reasons. They provide convenient ways in which to organize the home, pay bills, search for information, study, focus on music and even watch shows. An innovative solution to complete these tasks has been a mobile computer. These desktops are mobile, small, robust and lightweight.

  37. I’d need to examine with you here. Which isn’t one thing I usually do! I take pleasure in studying a post that may make individuals think. Also, thanks for allowing me to comment!

  38. Hello, i think that i saw you visited my website so i came to “return the favor”.I’m trying to find things to improve my website!I suppose its ok to use a few of your ideas!!

  39. What’s up, after reading this awesome piece of writing i am as well glad to share my familiarity here with mates.

  40. Spot on with this write-up, I actually think this web site needs a lot more attention.

    I’ll probably be back again to read more, thanks for the info!

Comments are closed.

%d bloggers like this: