Brilliant use of CSS drop shadows

#1

Post by Seldaek » Thu, Feb 17, 2011, 9:46 AM UTC

Brilliant use of CSS drop shadows
nicolasgallagher.com

Re: Brilliant use of CSS drop shadows

#2

Post by flog » Thu, Feb 17, 2011, 11:25 AM UTC

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows.

Just a friendly word of (unbacked) warning to frontend devs :)

Re: Brilliant use of CSS drop shadows

#3

Post by mike-cardwell » Thu, Feb 17, 2011, 11:32 AM UTC

Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.

Re: Brilliant use of CSS drop shadows

#4

Post by mike-cardwell » Thu, Feb 17, 2011, 11:33 AM UTC

mike-cardwell wrote: post #3

Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.

Ah, read: http://nicolasgallagher.com/css-drop-shadows-without-images/

"Known browser support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+"

Re: Brilliant use of CSS drop shadows

#5

Post by MichaelApproved » Thu, Feb 17, 2011, 11:36 AM UTC

mike-cardwell wrote: post #4

mike-cardwell wrote: post #3

Nice. Which browsers does it work in? Firefox 3.6 works, IE7 doesn't. Not tested other versions of IE.

Ah, read: http://nicolasgallagher.com/css-drop-shadows-without-images/ "Known browser support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+"

Why not edit your original comment instead of posting a reply to yourself? You posted both within 1 minute of each other.

Re: Brilliant use of CSS drop shadows

#6

Post by hazelnut » Thu, Feb 17, 2011, 11:37 AM UTC

well done, wonderful css3 presentation!

Re: Brilliant use of CSS drop shadows

#7

Post by weego » Thu, Feb 17, 2011, 11:38 AM UTC

Chrome on my MBP really chugs trying to scroll down the page, I'm surprised it's being pushed that hard looking at the code.

Re: Brilliant use of CSS drop shadows

#8

Post by splatcollision » Thu, Feb 17, 2011, 11:42 AM UTC

flog wrote: post #2

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)

This is true in my experience. CSS shadows are awesome, but use with care when you're animating! I see a huge drop in framerate in my CSS animation tool when I have a big fat drop shadow on an element.

Re: Brilliant use of CSS drop shadows

#9

Post by ollysb » Thu, Feb 17, 2011, 11:53 AM UTC

Very nice. I was a little disappointed to discover how much code was required to achieve the effects though. Having to resort to using content:"" always feels like a workaround. Not having to use images is great though, I'll definitely be using this as a reference.

Re: Brilliant use of CSS drop shadows

#10

Post by mickeyben » Thu, Feb 17, 2011, 11:57 AM UTC

flog wrote: post #2

I use these with caution on animated pages or large elements; I don't have links to hand, but have lots of anecdotal stories of performance degradation with CSS drop shadows. Just a friendly word of (unbacked) warning to frontend devs :)

Drop shadows are very slow when animated because they have to be recalculated every time they move.