Archives du mot-clef border-radius

Merging title and related text

2 réponses

We all now how bad it is that hN and the fol­lo­wing text are not rela­ted. Well, you may appre­ciate this trick I finalised.

At the heart, it is fairly simple, but the advan­ced part (roun­ded cor­ners) requires Safari night­lies, since indi­vi­dual radii are not yet sup­por­ted by other brow­sers. Notice ano­ther recipe which does not work with Mozilla (too…) had been used here: run-in. Mozilla does not sup­port run-in and this is a known bug since 1998.

Below is a screen­shot of the ren­de­red result. There is also a test­page with all the code, commented.

Merge hN and below

Many thanks to Laura for hel­ping me for the code (by the way, she also as a nice pho­to­blog: Pho­to­gra­phies et belles images).

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.

…

…

…

…

…

…

…

…

…

Conflict between border-collapse and border-radius

Laisser une réponse

Bet­ter to know it: border-collapse doesn’t work with border-radius. That makes sense when you think about it, but I had to stumble upon it to rea­lise it.

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 href=« http://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 nice pic­tures 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.