Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Brilliant use of CSS drop shadows

nicolasgallagher.com

Post reply on HN
Print view View original

51–60 of 61 posts

Re: Brilliant use of CSS drop shadows

#51

Post by MikeMakesIt »

JonnieCache wrote: post #30
chadgeidel wrote: post #28

Earlier quoted context omitted.

Wait, when did MS prevent other browser manufacturers from including hardware-accelerated rendering? Also - to specifically counter your point IE9 will have hardware accelerated rendering via Direct2D: http://blogs.msdn.com/b/ie/archive/2009/11/18/an-early-look-...

They actually completely stopped development on IE between version 6 and 7. There was no IE dev team, beyond people patching bugs. Obviously this did not prevent other people doing GPU-acceleration, but the leading player deliberately halting development will and did cause the market to stagnate.

This isn't relevant and as much as IE6 is a pain in the ass, it's time to get over it.

Re: Brilliant use of CSS drop shadows

#52

Post by 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

Re: Brilliant use of CSS drop shadows

#53

Post by derleth »

alanh wrote: post #34
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 :)

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

I'm running Chromium 9.0.597.94 (73967) (the one in the default Maverick repos) on Ubuntu 10.10 x86_64 and there's no lag on my system at all.

(Is the difference between Chrome and Chromium likely to be relevant?)

Re: Brilliant use of CSS drop shadows

#54

Post by jmtulloss »

bzbarsky wrote: post #35
JonnieCache wrote: post #16

Earlier quoted context omitted.

The fact that you are correct is laughable in this age of GPUs commonly having 512mb+ of dedicated RAM. Think what the latest game engines can do at 60fps, why oh why do our browsers still sweat over a few alpha channels in 2011? EDIT: My galaxy S phone runs Quake 3 at 60fps, flawlessly. MY PHONE RUNS QUAKE 3! Why can't my browser do alpha blending at more than 10fps?

Games do pretty simple things on the GPU. Download textures, then transform them. They do a _lot_ of it, but conceptually the operations are not actually all that complicated or varied, by and large. Browsers have this little thing they have to deal with called "text". Turns out that stuffing reasonable text into a texture and then scrolling it, say, is not something GPUs can do a good job of. This is why games just…

At palm, I didn't work on the 3d acceleration bits, but I worked with those that did. This explanation is pretty much spot on. In an environment where you don't already know your textures, 3d acceleration is a very difficult task. That's why only a select number of CSS transforms have been hardware accelerated to date.

Re: Brilliant use of CSS drop shadows

#55

Post by lurchpop »

Groxx wrote: post #37
alanh wrote: post #34

Earlier quoted context omitted.

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

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

Same here. smooth on FF 3.5 and Chrome 9.0.9. windows safari 5.0 lagging though

Re: Brilliant use of CSS drop shadows

#56

Post by duarte »

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 :)

Scrolls perfectly on my iPad.

Re: Brilliant use of CSS drop shadows

#57

Post by notyourwork »

blinkingled wrote: post #48
notyourwork wrote: post #47

Earlier quoted context omitted.

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

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&#3... . Scrolling was very jittery in general and page rendering/painting was also slower. Not like molasses slow but definitely not acceptable for a Cor…

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.

Re: Brilliant use of CSS drop shadows

#58

Post by VMG »

bzbarsky wrote: post #35
JonnieCache wrote: post #16

Earlier quoted context omitted.

The fact that you are correct is laughable in this age of GPUs commonly having 512mb+ of dedicated RAM. Think what the latest game engines can do at 60fps, why oh why do our browsers still sweat over a few alpha channels in 2011? EDIT: My galaxy S phone runs Quake 3 at 60fps, flawlessly. MY PHONE RUNS QUAKE 3! Why can't my browser do alpha blending at more than 10fps?

Games do pretty simple things on the GPU. Download textures, then transform them. They do a _lot_ of it, but conceptually the operations are not actually all that complicated or varied, by and large. Browsers have this little thing they have to deal with called "text". Turns out that stuffing reasonable text into a texture and then scrolling it, say, is not something GPUs can do a good job of. This is why games just…

I doubt that text is a difficult problem for the GPU. Aside from the software stack and font format problem, you should be able to render text as vectors and put some antialiasing on it.

Re: Brilliant use of CSS drop shadows

#59

Post by Tyr42 »

alanh wrote: post #34
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 :)

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

I don't notice any lag in Opera 11

Re: Brilliant use of CSS drop shadows

#60

Post by Seldaek »

ck2 wrote: post #31

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=... maybe a later release

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).
Post reply on HN