Dec
21
2011

Quick Fun: CSS3 Filter Effects

By Tomomi Imura  //  CSS, Sandbox, Uncategorized, WebKit  //  13 Comments

I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly! (Edited: Now also supported on 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);
}


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

  • hi, I’m learning this whole new thing of CSS3 and Webkit and HTML5 (I’ve been quite un-updated lol)
    So basicacally I want to do this test: a simple tag link making some webkit effect like the invert() i’ve tried but I keep failing

    Thanks for reading btw ;)

    Keep sharing the good stuff, it’s very appreciated :)

  • Hi Ricardo,
    it looks like WordPress turned < a > into an html so your comment is now in pink (linked)! Anyway, I did understand the question so no prob :-)

    I think you are using a unsupported browser to test the invert effect.
    Unfortunately, the css3 filter effect is only supported by a few browsers so far. (See http://caniuse.com/#feat=css-filters) so try it with the latest Chrome or Safari.

    Also, the vendor prefix, -webkit- is still required. so if you want to invert the color, you need:

    .something {
    -webkit-filter: invert();
    }

Leave a comment