Runde hjørner uden grafik

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

Forsiden » Showcase » Demoside

Alessandro Fulciniti er ophavsmanden til to artikler, der introducerer en alternativ måde, hvorpå vi kan lave runde hjørner på vore CSS-kasser.

Den normale fremgangsmåde er, at vi laver 4 grafikker, der repræsenterer hvert deres hjørne af boksen. Disse grafikker sættes så ind i boksen, dels som normale html-grafikker, dels som CSS baggrundsbilleder. Se f.eks. min artikel Runde hjørner på CSS-kasser.

Allesandros første artikel var Nifty Corners: rounded corners without images, hurtigt fuldt op af en længere redegørelse og væsentlige forbedringer i artiklen More Nifty Corners, hvorfra jeg har hentet de eksempler, jeg viser på denne side.

For at tegne den blå kasse med overskriften til denne artikel, har jeg brug for 4 forskellige dele, som alle indlæses i head-delen af siden:

<link rel="stylesheet" type="text/css" 
  href="niftyCorners.css">
<link rel="stylesheet" type="text/css" 
  href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#container","all","#efefef","#369","smooth");
}
</script>

Når siden indlæses eksekveres funktionskaldet Rounded(...) med 5 parametre, der øver indflydelse på, hvorledes hjørnerne tegnes.

  1. Det element, der skal forsynes med hjørner
  2. Hvilke hjørner, der skal være runde
  3. Hjørnets udvendige farve
  4. Hjørnets indvendige farve
  5. Hvilken type hjørner, der skal være. Der er 3 muligheder: Smooth, border og small.

Dette er en testboks
Hjørnetype small

Dette er en testboks
Hjørnetype border

De to eksempler herover illustrerer, at du nemt kan have flere forskellige bokse på siden. Det opnås ved at gentage funktionskaldet Rounded(...) så mange gange, det er nødvendigt, med de parametre, der er karakteristiske for hver boks.

Da det også er muligt at bestemme, hvilke hjørner, der skal være runde, kan du lave effekter som den, der er vist herunder:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Sidebar

Lorem
ipsum
dolor
sit
amet

Jeg må sige, at jeg finder Allesandros metode noget nemmere at håndtere end at sidde og fedte med en mængde små grafikker. Bagdelen ved metoden er, at man får de hjørner, der er bestemt én gang for alle.

I denne artikel har jeg kun præsenteret metoden og vist et par eksempler. Hvis du vil bruge denne metode, er det nok en fordel, hvis du læser de oprindelige artikler og kigger nærmere på Allesandros egne rigelige eksempler.

25. maj 2005