Dec
21

Quick Fun: CSS3 Filter Effects

By admin  //  CSS, Sandbox, Uncategorized, WebKit  //  11 Comments

I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly! (Edited: and Chrome Canary 18.0.976.0 +)

Click the images to view in the full size.

no filter
This is a default google.com screen.
No filter added.

filter:blur(2px)
blur(radius) to create Gaussian blur

-webkit-filter: blur(2px);

The default is 0, no blur.

filter:brightness(30%)
brightness(amount)

-webkit-filter: brightness(30%);

The default is 100%. Values of amount over 100% are allowed.
Updated: I am not sure when it has modified, but it seems that not the accepted value is the range between -100% (dark) and 100% (light), and the default is 0.

filter:contrast(30%)
contrast(amount)

-webkit-filter: contrast(30%);

The default is 100%. Values of amount over 100% are allowed.

filter:grayscale(100%)
grayscale(amount)

-webkit-filter: grayscale();

The default is 100%.

filter:sepia(100%)
sepia(amount)

-webkit-filter: sepia();

The default is 100%.

filter:invert(100%)
invert(amount)

-webkit-filter: invert();

The default is 100%.

filter:opacity(30%)
opacity(amount)

-webkit-filter: opacity(30%);

The default is 100%, no transparency.

filter:saturate(50%)
Saturate(amount)

-webkit-filter: saturate(50%);

The default is 100%.

filter:saturate(300%)
Saturate(amount) – the amount over 100% is also allowed.

-webkit-filter: saturate(300%);


filter:hue-rotate(90deg)
hue-rotate(angle)

-webkit-filter: hue-rotate(90deg);

The default is 0deg.

filter:hue-rotate(300deg)
hue-rotate(angle)

-webkit-filter: hue-rotate(300deg);


filter:drop-shadow(...)
drop-shadow(<shadow>)

/* Adding Drop-shadow on the toolbar at the top */

#bg {
  -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);
}


Author:

Short story: keeping my website since 1996, finally started this blog in 2007. Long story: see "About" page!

has written 78 articles for us.

11 Comments to “Quick Fun: CSS3 Filter Effects”

  • Zach December 21, 2011 at 4:55 pm

    It almost seems like the invert filter is also de-saturating, but that might be due to image compression?

  • admin December 21, 2011 at 9:36 pm

    Zach, I am not sure how invert should correctly looks like, but I just quickly tried on WK Nightly with this code:
    javascript:document.documentElement.style.webkitFilter=’invert() saturate(50%25)’

    I tried 100% invert, with 50% saturation. (%25 is just an escape char for %)
    It does result more de-saturated color.

    When I tried with 200% saturation (with invert), ah, it is saturated and my eyes hurt!

  • properties by web (et un peu de design) - Pearltrees December 22, 2011 at 1:49 am

    [...] Quick Fun: CSS3 Filter Effects « GirlieMac! Blog -webkit-filter: brightness(30%); The default is 100%. [...]

  • CSS3 adds Filter Effects 1.0 to it's awesome features! | DirTek Designs December 22, 2011 at 2:37 am

    [...] can see view full screenshots and codes for each filter on the GirlieMac! blog. You can also read more information about them on the W3C website. (function(d){ var [...]

  • niloy mondal December 22, 2011 at 8:14 am

    whats the purpose of drop shadow and opacity filters? we already have that in css.

  • tech blog - [crosspost] Quick Fun: CSS3 Filter Effects December 22, 2011 at 8:33 am

    [...] +Источник: girliemac.com « Замена в таблице [...]

  • Geckotang December 23, 2011 at 9:40 am

    bad
    -webkit-filter: drop-shadow(rgba(0,0,0,0.5), 0 5px 5px);

    good
    -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);

  • admin December 23, 2011 at 11:09 am

    Geckotang, thank you! I fixed the typo just now!

    niloy, yeah I was wondering the same.

  • 有趣的css3 filter effects – 91CssGarden December 25, 2011 at 7:34 pm

    [...] http://girliemac.com/blog/2011/12/21/quick-fun-css3-filter-effects/ 转载请注明：91CssGarden » 有趣的css3 filter effects 火柴— E-mail：1547053586@qq.com [...]

  • admin January 4, 2012 at 9:55 pm

    Check this out:
    http://dabblet.com/gist/1562718

    This example by Lea Verou tell you how drop-shadow() differs from the box-shadow.

  • Mark March 26, 2012 at 1:45 pm

    Great list. I have known these where available, but never really paid attention. You’ve inspired me to make a few webkit goodies. Thanks!

Leave a comment