Runde hjørner III

En teknik til at lave runde hjørner uden brug af grafiske elementer. I stedet bruges udelukkende CSS.

Alessandro Fulciniti’s JavaScript metode til at generere runde hjørner (se min artikel Runde hjørner uden grafik) har inspireret Stu Nicholls, som i en artikel på www.webreference.com demonstrerer en teknik, hvorefter du kan lave vilkårligt formede hjørner udelukkende ved hjælp af CSS. Metoden er en anelse mere båndbreddevenlig end Allesandros metode, der kræver indlæsning af et script på ca. 5 kilobyte.

Illustration af teknikken til at lave runde hjørner med CSS

Idéen kan illustreres grafisk ved hjælp af det billede, du ser herover. Det viser en kasse med runde hjørner, på en baggrund med farven #efefef; Kassen er omgivet af en border med farven #00c8ec (blå), mens kassens baggrundsfarve er #ffd16f (gul).

Illustrationen giver nøglen til forståelse af konstruktionen, der består af

  1. Linie 1 på 1 pixels tykkelse med en blå baggrundsfarve og en margin i begge sider på 5 pixel;
  2. Linie 2 på 1 pixels tykkelse med en 2 pixel bred blå border i begge sider, en margin i begge sider på 3 pixel samt en gul baggrundsfarve;
  3. Linie 3 på 1 pixels tykkelse med en 1 pixel bred blå border i begge sider, en margin i begge sider på 2 pixel samt en gul baggrundsfarve;
  4. Linie 4 på 1 pixels tykkelse med en 1 pixel bred blå border i begge sider, en margin på begge sider på 1 pixel samt en gul baggrundsfarve;

Html-koden til boksens øverste del ser nu således ud:

<div id="boks_1">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b4"></b>
...
</div>

Af figuren fremgår det, at vi stabler disse linier oven på hinanden i en passende kombination. Vi bruger b-markøren, fordi den fylder mindre i koden end span-markøren. b-markøren er en inline markør, så den laver vi om til en blokmarkør ved hjælp af display-egenskaben, se hele stylesheet koden i eksempel 1.

Boksens underste del tegnes af følgende html-kode:

...
<b class="b4"></b>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</div>

... altså de fire linier i omvendt orden af, hvad vi brugte til boksens øverste del.

Hele balladen er indeholdt i en container, som vi giver den bredde, vi ønsker kassen skal have, her browservinduets bredde minus 10% margin på begge sider.

Eksempel 1 svarer nøje til figuren herover. Bemærk at højre og venstre kant tegnes af en border-left og border-right på kassen .boxcontent. Disse bliver så lange som .boxcontent-kassen er høj. Denne højde bestemmes af kassens tekstindhold. Det er derfor afgørende at det øverste henholdsvis nederste tekstelement ikke har nogen øvre, henholdsvis nedre margin, men gerne en padding.

En visuelt simplere udgave af den samme boks med runde hjørner ser du i eksempel 2.

Jeg synes, der er ret afgørende at man sætter sig hen med et stykke ternet papir og tegner op pixel for pixel, hvilke egenskaber, hver linie skal have.

Andre former

Når man sidder med et sådant stykke papir kan man blive inspireret til andre former på hjørnerne, f.eks. som på figuren herunder, der er omsat til eksempel 3.

Illustration af teknikken til at lave alternative hjørner med CSS

I eksempel 3 kan du se, hvorledes denne figur tager sig ud, når den omsættes til html- og stylesheet kode.

Det er værd at bemærke, at disse konstruktioner er elastiske. En vilkårlig kasses visuelle design ændrer sig ikke, uanset mængden af tekstindhold eller kassens bredde, der er relativ til browservinduets bredde. Prøv f.eks. i eksemplerne at ændre på browservinduets bredde, og du vil se, at kasserne ændrer sig i takt med dette, ganske som forventet.

Flere eksempler

Stu Nicholls' originalartikel på webreference.com (se link i denne artikels indledning) omfatter flere eksempler, nogle mere elegante end andre. Og, som Stu også påpeger i artiklen, mulighederne er nærmest endeløse.

Jeg vil også i sammenhængen pege på Stu's websted, http://www.stunicholls.myby.co.uk/, der omfatter en række meget interessante artikler om design af forskellige webside detaljer med CSS.

25. maj 2005

Runde hjørner

Romertallet III i overskriften til denne artikel viser, at det er den tredie artikel, jeg har skrevet om dette emne.

De to andre artikler er:
Runde hjørner på CSS-kasser og
Runde hjørner uden grafik

Abonnér på nyhedsbrev
Søg på siderne
Anbefal siden til en ven

Online support

Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail opdatering i tilfælde af rettelser eller uddybende forklaringer til bogens eksempler.

Samtidig får du også gennem disse nyhedsbreve besked om nye og opdaterede artikler på dette websted.

Du kan læse mere om denne sag på websiden Nyhedsbrev.