Archives du mot-clef showcase

Shadow scrolling

2 réponses

Have fun with CSS3… again.

Here I am repli­ca­ting a well-known effect that tra­di­tio­nally uses pic­tures. This effect was once dis­played at Surfin’Safari (before it moved to webkit.org) as evi­den­ced by this Archive.org snap­shot.

box-shadow-hack.png
CSS3-generated sha­dow (box-shadow)

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

  • some border-radius to sof­ten the bor­ders. 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 beha­viours as other properties
  • some border-bottom to fur­ther sof­ten the bor­ders. I chose an inter­me­diate value bet­ween the back­ground and the sha­dow (namely, #dedede). Plus, it helps making it rea­dable on a non box-shadow capable brow­ser (but this is but a nice addi­tion, com­pa­ti­bi­lity 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 sty­ling, just check the source code below)
  • Almost (background:rgba(255,255,155,.95) opaque back­ground for a nice effect à la CSSE­dit web­site (old layout). Notice how the back­ground is trans­pa­rent enough to show the text but not too much so that it won’t dis­turb you while brow­sing. HSLA would be bet­ter (more intui­tive for the author to set up) but is not sup­por­ted yet. As for opa­city, 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 stan­dard: Apple intro­du­ced this effect without W3C’s appro­val, but since CSS3 is still at draft stage, we may expect some changes soon). Here, the texte is white inside (mainly visible on the downs­troke of the s and the o) and black out­side. Thank to the text-fill-color value, the text will appear white inside only to text-stroke–capable brow­sers (pro­vi­ded they really imple­ment it, of course—i.e. not par­tially); For the others, the regu­lar color will be used. This fix the “ren­de­ring hole” in text-shadow (spe­ci­fic longdesc).

At the date of wri­ting, you need Web­Kit (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 pic­ture.

Below is some lip­sum just to let you enjoy the fading effect pro­vi­ded by the com­bi­na­tion of position:fixed and box-shadow. To bet­ter see it, scroll down slowly.

Lorem ipsum dolor sit amet, consec­te­tuer adi­pis­cing elit. Morbi accum­san, elit et laci­nia porta, quam nisl euis­mod nunc, nec fau­ci­bus metus tel­lus faci­li­sis ante. Sed ac dolor ut quam ultri­cies sol­li­ci­tu­din. Pha­sel­lus feu­giat ali­quam dui. Quisque nec neque. In rutrum, felis non gra­vida posuere, enim enim pha­re­tra nibh, eu lao­reet libero tel­lus eget arcu. Sed nisl neque, cur­sus eget, volut­pat ut, sus­ci­pit sed, leo. Morbi dignis­sim lorem et arcu. Morbi eges­tas. Ves­ti­bu­lum porta euis­mod lacus. Cura­bi­tur tel­lus tor­tor, tin­ci­dunt eget, ali­quet ut, male­suada quis, ligula. Donec feu­giat, elit at rutrum vehi­cula, tur­pis est pul­vi­nar eros, sed dapi­bus lec­tus dui tris­tique massa. Nul­lam a nibh. Sus­pen­disse quis elit a justo rhon­cus sce­le­risque. Ut elit. Ves­ti­bu­lum luc­tus sem ut massa.

Mau­ris nec tel­lus dapi­bus purus ali­quet port­ti­tor. Pel­len­tesque adi­pis­cing volut­pat sapien. Sed sed tor­tor. Mau­ris dolor purus, ele­men­tum luc­tus, ultri­cies viverra, ves­ti­bu­lum at, arcu. Sed arcu urna, sagit­tis vitae, vul­pu­tate eges­tas, condi­men­tum sit amet, ipsum. Sed mi pede, tin­ci­dunt et, volut­pat eu, mat­tis at, nibh. Viva­mus ali­quet. Cura­bi­tur lacus purus, elei­fend id, lao­reet ut, nonummy a, nisi. Nam sed augue. Duis ut diam eget nibh blan­dit pha­re­tra. Viva­mus velit enim, viverra eges­tas, consec­te­tuer a, dapi­bus accum­san, mi. Sus­pen­disse inter­dum faci­li­sis eros. In at eros. Quisque quis augue. Nul­lam vel justo. Sus­pen­disse a mi. Viva­mus lao­reet. Fusce eges­tas quam vel lec­tus rutrum posuere. Morbi sed nisi. Nunc dignis­sim faci­li­sis arcu.

…

…

…

…

…

…

…

…

…

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

Laisser une réponse

A new ven­dor spe­ci­fi­ca­tion from Web­Kit: text-stroke. you won’t find it in CSS3 (yet), but this is a long-awaited func­tion (at least by me). As someone said: Web­kit is not only the basis for Safari, though, but an inte­gral part of OS X. Typo­gra­phy has always been a strength of Mac OS…1

Sur­ely this the rea­son they imple­men­ted those fancy fonts.

text-fill-color
This pro­perty allows you to spe­cify a fill color for text. If it is not set, then the color pro­perty will be used to do the fill.
text-stroke-color
This pro­perty allows you to spe­cify a stroke color for text. If it is not set, then the color pro­perty will be used to do the stroke.
text-stroke-width
This pro­perty allows you to spe­cify the width of the stroke. It defaults to 0, mea­ning that only a fill is per­for­med. You can spe­cify a length for this value, and in addi­tion the values thin, medium and thick can be used (with ‘thin’ being most like the out­line beha­vior of OS X).
text-stroke
This pro­perty is a shor­thand 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 convin­ced (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.

Have fun with CSS3

Laisser une réponse

I just learnt from the cool guys at CSS3.info that Web­kit now sup­ports box-shadow (text-shadow for blocks). As <a onclick=« javascript:_gaq.push([’_trackPageview”, “/out/webkit.org/blog/?p=86>mentioned on the Surfin’Safari entry, it is great too for new table look, with “floa­ting” cells.

They give some men­tio­ned on the Surfin’Safari entry, it is great too for new table look, with “floa­ting” cells.

They give some <a href=”]); » href=« http://www.css3.info/preview/box-shadow.html » class=« broken_link »>nice pictures of drop­ped sha­dows, but back in the day Web­Kit pio­nee­red in sup­por­ting text-shadow, I crea­ted a nice aura effect by using non-dropped sha­dow (and a bit of Uni­code)1. This code abuse page is still there (look for the word radioactivity).

Now, this “text aura” effect may be repli­ca­ted with box-shadow too. The trick for the aura effect is to use a large blur value to illu­mi­nate the block, appa­rently from “behind” (although no z-index had been har­med in the pro­cess. I swear it).

Simple code
<div style="background:#efefef;-webkit-box-shadow:0 0 200px yellow">Radioactivity</div>
Radio­ac­ti­vity

Nice effet, right (pro­vi­ded you are using a bow-shadow–capable brow­ser, of course)? But this is just the beginning.

Now with a bit more code. Fas­ten your seat­belt, Doro­thy. ’Cause pic­tures 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>
☢ Radio­ac­ti­vity ☢
☢ Radio­ac­ti­vity ☢

Look Ma’: no picture!

Beware: truly dra­ma­tic effect also require truly dra­ma­tic CPU! (a 20em blur is not for eve­ryone and should not be used in real-life).

Yes, I know that text-shadow (and box-shadow too, I guess) are sup­po­sed to be repla­ced by SVG. Still. This thing rocks.

Oh, stu­pid me. Your brow­ser can’t dis­play it, right? Here’s the pic­ture. Enjoy.

Shadowactivity
  1. Gran­ted, I got my ins­pi­ra­tion from the W3C Eclipse example, but still…
  2. This pic­ture is a 20em blur, very-resource-intensive. If you are using an LCD screen, try loo­king the pic­ture from dif­ferent angles. From below, the blur appear as huge, while in front, you notice it much less.