Archives du mot-clé showcase

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 webkit.org) as evidenced by this Archive.org snapshot.

box-shadow-hack.png
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!

New CSS3 value: text-stroke (WebKit vendor extension)

A new vendor specification from WebKit: text-stroke. you won’t find it in CSS3 (yet), but this is a long-awaited function (at least by me). As someone said: Webkit is not only the basis for Safari, though, but an integral part of OS X. Typography has always been a strength of Mac OS…1

Surely this the reason they implemented those fancy fonts.

text-fill-color
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.
text-stroke-color
This property allows you to specify a stroke color for text. If it is not set, then the color property will be used to do the stroke.
text-stroke-width
This property allows you to specify the width of the stroke. It defaults to 0, meaning that only a fill is performed. You can specify a length for this value, and in addition the values thin, medium and thick can be used (with ‘thin’ being most like the outline behavior of OS X).
text-stroke
This property is a shorthand for the two stroke properties.
<div style="color:#906200;font-size:4em;text-shadow:5px 5px 10px #222;-webkit-text-stroke:5px black">This text has a black 3px stroke and a purple fill.</div>
This text has a black 3px stroke and a purple fill.
text-stroke

  1. If you are not convinced (or even if you are), take a look at Du bête RTF and Essayez de faire ça avec le bloc-notes. This is in French, but there is a lot of pictures.

flattr this!

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!