I just learnt from the cool guys at CSS3.info that Web­kit now sup­ports box-shadow (text-shadow for blocks). As <a onclick=« javascript:_gaq.push([’_trackPageview”, “/out/webkit.org/blog/?p=86>mentioned on the Surfin’Safari entry, it is great too for...

I just learnt from the cool guys at CSS3.info that Web­kit now sup­ports box-shadow (text-shadow for blocks). As <a onclick=« javascript:_gaq.push([’_trackPageview”, “/out/webkit.org/blog/?p=86>mentioned on the Surfin’Safari entry, it is great too for new table look, with “floa­ting” cells.

They give some men­tio­ned on the Surfin’Safari entry, it is great too for new table look, with “floa­ting” cells.

They give some <a href=”]); » href=« http://www.css3.info/preview/box-shadow.html » class=« broken_link »>nice pictures of drop­ped sha­dows, but back in the day Web­Kit pio­nee­red in sup­por­ting text-shadow, I crea­ted a nice aura effect by using non-dropped sha­dow (and a bit of Uni­code)¹. This code abuse page is still there (look for the word radioactivity).

Now, this “text aura” effect may be repli­ca­ted with box-shadow too. The trick for the aura effect is to use a large blur value to illu­mi­nate the block, appa­rently from “behind” (although no z-index had been har­med in the pro­cess. I swear it).

Simple code

<div style="background:#efefef;-webkit-box-shadow:0 0 200px yellow">Radioactivity</div>

Nice effet, right (pro­vi­ded you are using a bow-shadow–capable brow­ser, of course)? But this is just the beginning.

Now with a bit more code. Fas­ten your seat­belt, Doro­thy. ’Cause pic­tures are going bye-bye.

<div style="background:#000;border:1px solid #000;font-size:300%;border:#461313 medium solid;-moz-border-radius:10px;-webkit-border-radius:10px;font-family:monospace;font-weight: 900;margin:auto;text-align:center;text-shadow:0 0 20px yellow;width:80%">☢ Radioactivity ☢</div>

Look Ma’: no picture!

Beware: truly dra­ma­tic effect also require truly dra­ma­tic CPU! (a 20em blur is not for eve­ryone and should not be used in real-life).

Yes, I know that text-shadow (and box-shadow too, I guess) are sup­po­sed to be repla­ced by SVG. Still. This thing rocks.

Oh, stu­pid me. Your brow­ser can’t dis­play it, right? Here’s the pic­ture. Enjoy.

1. Gran­ted, I got my ins­pi­ra­tion from the W3C Eclipse example, but still…
2. This pic­ture is a 20em blur, very-resource-intensive. If you are using an LCD screen, try loo­king the pic­ture from dif­ferent angles. From below, the blur appear as huge, while in front, you notice it much less.