Archives du mot-clé box-shadow

Shadow scrolling

Have fun with CSS3… again.

Here I am replicating a well-known effect that traditionally uses pictures. This effect was once displayed at Surfin’Safari (before it moved to as evidenced by this snapshot.

CSS3-generated shadow (box-shadow)

I also added some extra effects, just for the sake of it:

  • some border-radius to soften the borders. By the way, notice that border-radius:0 15px 0 15px doesn’t work. I hope it will be fixed, so that it will have the same behaviours as other properties
  • some border-bottom to further soften the borders. I chose an intermediate value between the background and the shadow (namely, #dedede). Plus, it helps making it readable on a non box-shadow capable browser (but this is but a nice addition, compatibility had never been in my mind there).
  • a visible title (there is no h1 here!) which is done very easily: head, head title {display:block} (for the detail of the styling, just check the source code below)
  • Almost (background:rgba(255,255,155,.95) opaque background for a nice effect à la CSSEdit website (old layout). Notice how the background is transparent enough to show the text but not too much so that it won’t disturb you while browsing. HSLA would be better (more intuitive for the author to set up) but is not supported yet. As for opacity, it doesn’t give exactly the same result (no visible box-shadow with opacity:.95)
  • Some text-shadow, because it is cool:-).
  • A variant on the usual text-stroke (which is not standard: Apple introduced this effect without W3C’s approval, but since CSS3 is still at draft stage, we may expect some changes soon). Here, the texte is white inside (mainly visible on the downstroke of the s and the o) and black outside. Thank to the text-fill-color value, the text will appear white inside only to text-stroke-capable browsers (provided they really implement it, of course—i.e. not partially); For the others, the regular color will be used. This fix the “rendering hole” in text-shadow (specific longdesc).

At the date of writing, you need WebKit (OS X only) to enjoy the whole thing.

And here is the CSS code:

head, head title {display:block} head title { 	background-color:rgba(255,255,255,.95); 	border-bottom:1px solid #dedede; 	color:#222; 	font-family:Didot, serif; 	font-size:200%; 	font-variant:small-caps; 	font-weight:900; 	left:0; 	margin-bottom:2em; 	padding:.6em 0; 	position:fixed; 	right:0; 	text-align:center; 	text-shadow:0 0 5px #111; 	-webkit-box-shadow:0 5px 10px #ccc; 	-moz-border-bottom-left-radius:5px; 	-moz-border-bottom-right-radius:5px; 	-webkit-border-bottom-left-radius:5px; 	-webkit-border-bottom-right-radius:5px; 	-webkit-text-fill-color:white; 	-webkit-text-stroke:2px black } 	body	{margin-top:8em /*compensation for the displayed title*/}

To see a whole page, just click on the first picture.

Below is some lipsum just to let you enjoy the fading effect provided by the combination of position:fixed and box-shadow. To better see it, scroll down slowly.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi accumsan, elit et lacinia porta, quam nisl euismod nunc, nec faucibus metus tellus facilisis ante. Sed ac dolor ut quam ultricies sollicitudin. Phasellus feugiat aliquam dui. Quisque nec neque. In rutrum, felis non gravida posuere, enim enim pharetra nibh, eu laoreet libero tellus eget arcu. Sed nisl neque, cursus eget, volutpat ut, suscipit sed, leo. Morbi dignissim lorem et arcu. Morbi egestas. Vestibulum porta euismod lacus. Curabitur tellus tortor, tincidunt eget, aliquet ut, malesuada quis, ligula. Donec feugiat, elit at rutrum vehicula, turpis est pulvinar eros, sed dapibus lectus dui tristique massa. Nullam a nibh. Suspendisse quis elit a justo rhoncus scelerisque. Ut elit. Vestibulum luctus sem ut massa.

Mauris nec tellus dapibus purus aliquet porttitor. Pellentesque adipiscing volutpat sapien. Sed sed tortor. Mauris dolor purus, elementum luctus, ultricies viverra, vestibulum at, arcu. Sed arcu urna, sagittis vitae, vulputate egestas, condimentum sit amet, ipsum. Sed mi pede, tincidunt et, volutpat eu, mattis at, nibh. Vivamus aliquet. Curabitur lacus purus, eleifend id, laoreet ut, nonummy a, nisi. Nam sed augue. Duis ut diam eget nibh blandit pharetra. Vivamus velit enim, viverra egestas, consectetuer a, dapibus accumsan, mi. Suspendisse interdum facilisis eros. In at eros. Quisque quis augue. Nullam vel justo. Suspendisse a mi. Vivamus laoreet. Fusce egestas quam vel lectus rutrum posuere. Morbi sed nisi. Nunc dignissim facilisis arcu.

Flattr this!

Have fun with CSS3

I just learnt from the cool guys at 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>

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.


  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!