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.
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