I just learnt from the cool guys at CSS3.info that Webkit now supports
They give some mentioned on the Surfin’Safari entry, it is great too for new table look, with “floating” cells.
They give some <a href=”]); » href=« http://www.css3.info/preview/box-shadow.html » class=« broken_link »>nice pictures of dropped shadows, but back in the day WebKit pioneered in supporting
text-shadow, I created a nice aura effect by using non-dropped shadow (and a bit of Unicode)1. This code abuse page is still there (look for the word radioactivity).
Now, this “text aura” effect may be replicated with
box-shadow too. The trick for the aura effect is to use a large blur value to illuminate the block, apparently from “behind” (although no
z-index had been harmed in the process. I swear it).
- Simple code
<div style="background:#efefef;-webkit-box-shadow:0 0 200px yellow">Radioactivity</div>
Nice effet, right (provided you are using a
bow-shadow–capable browser, of course)? But this is just the beginning.
Now with a bit more code.
Fasten your seatbelt, Dorothy. ’Cause pictures 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 dramatic effect also require truly dramatic CPU! (a 20em blur is not for everyone and should not be used in real-life).
Yes, I know that text-shadow (and box-shadow too, I guess) are supposed to be replaced by SVG. Still. This thing rocks.
Oh, stupid me. Your browser can’t display it, right? Here’s the picture. Enjoy.
- Granted, I got my inspiration from the W3C
Eclipseexample, but still…
- This picture is a 20em blur, very-resource-intensive. If you are using an LCD screen, try looking the picture from different angles. From below, the blur appear as huge, while in front, you notice it much less.