
Brilliant use of CSS drop shadows - Seldaek
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
======
flog
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 :)

~~~
alanh
Indeed, simply _scrolling_ this demo page in Chrome 9 feels very laggy.
_Edit:_ OS X, late 2009 MBP, BUT with the BetterHN tab/iframe on top (other
pages are smooth though).

~~~
Groxx
Really? 9.0.597.98 seems to be scrolling smoothly on Win 7 here.

~~~
blinkingled
Yep, Chrome is far better on Windows than OS X. So long as I was using OS X on
my MBP I couldn't use Chrome and kept going back to FF - but since switching
the machine to Win 7 I can't not use Chrome.

~~~
notyourwork
I have not noticed any issues with Chrome on my pro. Am I missing out on
performance?

~~~
blinkingled
It may be specific to my MBP model (17" Core i7) which has the weirdo
combination of Intel and Nvidia GPUs that are switched flakily in software at
OSX's whim and Chrome has been known to trip the GPU switching -
[http://www.google.com/search?sourceid=chrome&ie=UTF-8...](http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=chrome+osx+gpu+switch)
.

Scrolling was very jittery in general and page rendering/painting was also
slower. Not like molasses slow but definitely not acceptable for a Core i7
machine.

With Win 7 which uses only one GPU, the Nvidia one, it is very smooth and fast
as I said - definitely wouldn't want to go back.

~~~
notyourwork
I am running the 13" mbp and have not noticed anything out of the ordinary
though now I am going to start using firefox for a few weeks and see how I
feel.

------
mrchess
This post reminds me of how I "creatively" used CSS3 shadows for a job
interview. One of my tasks for this interview was to mimic an overlaying drop-
shadow effect from a PSD file. I couldn't figure out how to do it smoothly
using transparent images, so CSS3 box shadows to the rescue!

Here is the result. The images would slide left to right as a slideshow, and
the box shadows are on the borders to create the "layered" effect. The images
however do indeed use real image shadows. <http://i.imgur.com/0D7WQ.png>

------
weego
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.

~~~
ugh
Both Chrome and Safari get ever so slightly jittery on my four year old MBP.
The most important thing to test is probably whether performance is affected
if you want to use drop shadows.

There are other factors which can make scrolling less than butter smooth on
slightly aged hardware, this seems to be a weak spot of many fancy designs. I
don’t know whether those designs are just not tested in all browsers and on
slightly older hardware or whether that’s an intentional trade-off. I’m
extremely annoyed by even slightly jittery scrolling, but that’s probably just
me.

------
ck2
_Almost_ works in IE9, that's amazing in itself. But dead in IE8/7 of course.

(via browserling) <http://img29.imageshack.us/img29/4448/ie9corners.png>

Hmm, webpagetest shows it works completely in IE9

[http://cdn.webpagetest.org/thumbnail.php?width=930&test=...](http://cdn.webpagetest.org/thumbnail.php?width=930&test=110217_MP_e262e699747f7e48dd52b5227c00dcc7&run=1&file=1_screen.jpg)

maybe a later release

~~~
Seldaek
I can now confirm that it renders perfectly in IE9 RC1, it looks exactly like
in Opera 11 & Firefox 3.6. Chrome 9 is the only one rendering them a bit
awkward (tiny details, but still).

------
ollysb
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.

------
thetylerhayes
Aesthetics: :D

Performance: o_O

~~~
patrickaljord
It's super fast here on Ubuntu chrome 10.

------
Timmy_C
I like how he uses CSS transforms on the :before and :after pseudo element to
give it that "lifted" effect. That's something I never thought to try before.

------
pilom
A little tear in my heart. I must use IE7 at work.

~~~
lisperforlife
It is probably time to change your job. :-)

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

~~~
eik3_de
I fired up a VM with Windows XP with IE8, that's how it looks there:
<http://ge.tt/4bP3tEZ/ie8.png>

Firefox 3.6 and Chrome all good though.

~~~
theycallmemorty
My first thought was that it would suck in IE. The effects don't work, but at
least they degrade gracefully unlike other CSS tricks.

------
zakovyrya
Until they fix performance problems I'm pre-rendering stuff like that. Thank
you very much.

------
ajaykam
This is awesome on chrome, but I'm having some trouble on my iphone4. It
worked fine on the 3gs though, so I'm not sure whats up.

------
hazelnut
well done, wonderful css3 presentation!

