Det å lage pene bokser på en blogg eller et nettsted med flott runde hjørne var for bare kort tid siden en relativt stor jobb med en god del mekking. For å få det til måtte en lage seg fire bildefiler med fire avrundede hjørner og med de riktige fargene, og deretter måtte en konstruere en boks ut fra flere DIV-er inni hverandre og posisjonere hjørnene riktig. Det var ikke egentlig så forferdelig vanskelig, men det var tidkrevende og krevde en del pusling med kode.
Etter at CSS3 har kommet, og etter at vi nå har fått browsere som støtter deler av de nye CSS3-standardene, har dette (og mye annet) blitt langt lettere. Nå er det faktisk veldig lett å lage avrundede hjørner. Her er den grunnleggende koden for en boks med runde hjørner i CSS3 (vi må imidlertid bruke flere ganske like linjer for å støtte browsere basert på webkit og mozilla-maskinene):
.box { border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; }
Med bare litt ekstra kode for farge og slike ting, får vi lett boksen på høyre side. Svært enkelt faktisk – så enkelt at alle kan få dette til og ha nydelige bokser med runde hjørne på nettsidene eller bloggene sine!
Browsere som støtter CSS3 støtter også “box-shadows” og “text-shadows”. Og skyggelegging kan brukes sammen med runde hjørner om en ønsker det. Den grunnleggende koden for å få til dette er også enkel:
.box2 { box-shadow:5px -5px 10px #000; -webkit-box-shadow:5px -5px 10px #000; -moz-box-shadow:5px -5px 10px #000; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; }
Med bare litt ekstra formattering gir denne enkle koden og boks nummer to til høyre i teksten. Rimelig greit og enkelt, ikke sant? Og pent også, synes jeg. Skygge-effekten pynter opp og fremhever boksen. (Her er en demo-side med disse to boksene og med HTML og CSS-koden.)
Du kan også gjøre hvert enkelt av hjørnene runde med webkit- og mozilla-baserte browsere:
-moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Og – om du ikke ser runde hjørner i teksten ovenfor, så er det ikke fordi det er noe galt med koden, da bruker du en broswer som ikke støtten den nye flotte CSS3-standarden, og da er det kanskje på tide at du bytter til en mer moderne browser! (Antakelig bruker du Internet Explorer, og trenger å laste ned og bruker Firefox, Opera 10.5 eller nyere, Safari eller Chrome!) Lykke til!
