Opera Developer News

CSS box-shadow experiments

By Bruce Lawsonbrucelawson. Thursday, September 2, 2010 11:52:39 AM

Back from its temporary disappearance from the specification, CSS box-shadow is widely supported in all the modern browsers.

my.Opera blogger Anton Diaz has made some pretty cool experiments using box-shadow.

There are some browser comparison screenshots so you can see the state of support (the article is in Russian, but for the cyrillic-impaired, the CSS and images tell the story well enough, or you can deduce the sense through Google translate). It's fair to say that these are experimental, and not yet ready for production websites until browsers catch up, but they're interesting techniques.

Hat-tip to Vadim Makeev.

Buffered rendering in SVGOver The Air 2010: Bruce Lawson's Web Development 2.0 talk

Comments

BS-Harou # Thursday, September 2, 2010 3:11:28 PM

And do you plan to fix the box-shadow redraw bugs (any change of position, offset or scrolling over element with box-shadow cause problems) in Opera?

Some examples:
http://www.youtube.com/watch?v=IU61t1eWYow
http://www.youtube.com/watch?v=6K4NEvQgsAw
http://www.youtube.com/watch?v=9MdGtebGKbI

And last few builds of 10.70 are very slow with box-shadow redrwaing.
Test: http://files.myopera.com/BS-Harou/files/ob_transitionsAndBoxShadow.html
(works quit fine in Opera 10.60 and very smooth in Chrome)

Bruce Lawsonbrucelawson # Thursday, September 2, 2010 3:40:49 PM

We do. (That's why I said these are not ready for primetime, as I've experienced those bugs too)

BS-Harou # Thursday, September 2, 2010 3:59:36 PM

Originally posted by brucelawson:

We do. (That's why I said these are not ready for primetime, as I've experienced those bugs too)

That is GREAT! I've reported these bugs few days after releasing 10.50pa and I already thought that its never going to be fixed =)

Andreas Bovensandreasbovens # Thursday, September 2, 2010 4:07:15 PM

BS-Harou: I can't see a performance difference between 10.60 and 10.70 on my machine (Mac) when loading http://files.myopera.com/BS-Harou/files/ob_transitionsAndBoxShadow.html - it's not particularly fast, but not bad either. Chrome however is really slow on this particular testcase.

Just saying that we're currently at an early stage of implementation, resulting in performance differences and strange bugs, and we'll need some work to get all this running really smooth on all browsers+platforms. We're working on it :-)

Charles SchlossChas4 # Thursday, September 2, 2010 4:36:32 PM

BS-Harou # Thursday, September 2, 2010 4:50:15 PM

Originally posted by andreasbovens:

it's not particularly fast, but not bad either. Chrome however is really slow on this particular testcase.

I've got some strange computer than

anyway, thank you for answer, your hard work and remember that one of yours biggest fans is waiting for fixing those bugs

Artur „Jurgi” JurgawkaJurgi # Thursday, September 2, 2010 8:42:02 PM

Ugh, even just scrolling the page consumes horrible amount of CPU power.

Aux # Friday, September 3, 2010 11:52:09 AM

I have a small technical question - why Opera does not cache rendered page as image? That would speed up everything. Most of pages are static for most time. For exmaple, you can easily cache this page with comments and overlay my avatar on top of that (: Otherwise we will see more and more slow pages in the future, thanks to CSS3 (hey, Flash banners won't be CPU eaters anymore!).