Dec
21

Quick Fun: CSS3 Filter Effects

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);
}


11 Comments to “Quick Fun: CSS3 Filter Effects”

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

  • 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!

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

  • [...] 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 [...]

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

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

  • 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);

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

    niloy, yeah I was wondering the same.

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

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

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

  • 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