Have fun with CSS3

I just learnt from the cool guys at CSS3.info that Webkit now supports box-shadow (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>
Radioactivity

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>
☢ Radioactivity ☢

☢ Radioactivity ☢

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.

Shadowactivity

  1. Granted, I got my inspiration from the W3C Eclipse example, but still…
  2. 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.

flattr this!