I just learnt from the cool guys at CSS3.info that Webkit now supports
text-shadow for blocks). As 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.