Forsiden » CSS »

Runde hjørner på CSS-kasser

Mozilla browseren kan fortolke en stylesheet formregel, der laver runde hjørner. Men det er der jo ikke meget fornøjelse ved, når størstedelen af alle webbrugere anvender Internet Explorer.

Derfor beskriver jeg her en metode til at lave runde hjørner, der kan vises i alle browsere.

Lorem ipsum dolor sit amet, con­sec­tetur adipisicing elit, sed do eiusmod tempor in­ci­di­dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer­cita­tion ul­lam­co laboris nisi ut ali­quip ex ea com­modo conse­quat.

Den effekt, jeg ønsker at demonstrere, er den, du ser i den blå kasse her til højre.

I princippet er det forhåbentligt klart nok, hvad der foregår: Hver af de fire hjørner tegnes af en grafik. Kunsten er sådan set kun at få dem lagt ind i kassen på en fornuftig måde.

Grafikken

Hele kommersen starter med, at du laver 4 grafikker, der tegner hjørnerne. Alle grafikprogrammer har en figurtegningsmenu, der gør det muligt hurtigt og let at lave en firkant med runde hjørner. Når det er sket kan du klippe hver af hjørnerne ud og gemme dem som separate GIF- eller PNG-filer. Det, du skal tænke på, når du laver grafikken, er at forgrundsfarven skal være den samme som kassens baggrundsfarve, samt at grafikkens baggrundsfarve skal være den samme som baggrundsfarven på den webside, kassen skal vises på. Hvis du gør de "usynlige" dele af hjørnerne transparente, behøver baggrundsfarven ikke at være præcis den samme som websidens baggrundsfarve. Men for stor en forskel vil skabe en haloeffekt rundt om hjørnerne.

<div class="divrund">
   <div class="rundtop">
	 <img src="ul.gif" alt="" 
	 width="20" height="20" class="corner" 
	 style="display: none" />
   </div>
   [ Kassens tekstindhold ]
   <div class="rundbund">
	 <img src="ll.gif" alt="" 
	 width="20" height="20" class="corner" 
	 style="display: none" />
   </div>
</div>	

De 4 grafikker, der skal lave hjørnerne, skal indsættes i kassen på forskellig måde. Herover ser du HTML-koden til kassen. Kassen i sig selv har en id="divrund", der i et stylesheet forsynes med dimensioner, forgrundsfarve og baggrundsfarve. Inde i kassen har jeg – foruden teksten – indsat to kasser: en øvre kasse, div.rundtop, der skal indeholde de to hjørner foroven, og en nedre kasse, div.rundbund, der skal indeholde de to hjørner forneden.

De to grafikker, der repræsenterer henholdsvis øverste venstre og nederste venstre hjørne indsættes som almindelige billeder i de respektive kasser. Bemærk display-atributten, der skjuler grafikken for CSS-lamme browsere – og i øvrigt skjuler grafikken for alle browsere, medmindre vi gør noget ved det.

Det gør vi så i stylesheet'et, der også indsætter de to grafikker, vi ind til videre mangler, som baggrundsgrafikker i kasserne div.rundtop og div.rundbud. I stylesheet'et herunder ser du først formregelblokken for de to normalt indsatte billeder, og derefter kortformsudgaven af formregelblokkene for de billeder, der indsættes som baggrundsgrafik.

img.corner {
  width: 20px;
  height: 20px;
  border: none;
  display: block !important;
}
.rundtop { 
  background: url(ur.gif) no-repeat top right; 
}
.rundbund{
  background: url(lr.gif) no-repeat bottom right; 
}

Det er sådan set det.

De yderligere bemærkninger, jeg kan tilføje er: Jeg har ikke sat nogen eksplicit højde på kassen, så den bliver så høj som indholdet tilsiger. Her skal du dog lægge 20 pixel til foroven og forneden, idet tekst jo først kan begynde lidt nede i kassen, eftersom de øverste hhv. nederste 20 pixel jo er brugt på forhånd til de to kasser, der rummer hjørnerne.

Du kan med held give dit indhold en negativ margin-top på f.eks. 10 pixel for at hæve skriften lidt længere op i kassen. Så bliver der lidt mere luft forneden. Det kan du også ændre på, men så begynder stylesheet koden at blive så tilpas kompliceret, at jeg ikke er sikker på, at den kan holde i alle browsere. Så det afstår jeg fra, og overlader trygt videre eksperimenter med denne teknik til dig, min kære læser...

Opdateret 17. december 2003.

CSS eksempler:

Herkomst

Min første inspiration til den­ne teknik var Adam Kalsey, hvis eksempel jeg har fulgt;
Susanna King, der an­ven­der tek­nik­ken til sidedesign (og ikke kun til et enkelt element som i mit eksempel);
John Albin Wilkins, hvis kode er mere kompliceret, men også mere robust, samt (hvornår ikke?):
Eric Meyer, hvis teknik jeg har skrevet en særskilt artikel om (Formtekst).

Efter jeg i begyndelsen af december skrev denne artikel, havde Søren Madsen en aldeles fremragende længere artikel om emnet på A List Apart, Creating Custom Corners & Borders.

Søg på websiderne

Indtast søgeord

Abonner på mit nyhedsbrev

Indtast din e-mail adresse

Anbefal siden til en ven

Indtast e-mail adresse

Valid XHTML 1.0!