CSS: Innføring av runde hjørner
CSS2 har dessverre ikke innebygde muligheter for å lage runde hjørnekanter, noe som få støtte i CSS3. For dem som likevel vil ha runde hjørnekanter, må man vanligvis ty til noen hacks i form av tilpassede bilder av hjørnene. Dette var jeg imidlertid ikke interessert i siden dette ville bli for mye dill dall i forholdt til eventuelle endringer i designet. Jeg var ute etter en løsning hvor kun koden løste floken. Mitt ideelle eksempel er de runde hjørnene som Lifehacker har klart å bruke. Disse ser ikke ut til å bruke noen som helst form for bildehack, så en slik etterligning kan sies å være mitt mål. Etter lengre tids søking fant jeg kun én metode som nesten tilfredstilte mine krav. Det var kun et problem: Rammen må være 5px tykk for at hjørnene skal være hele og runde (se bildet til venstre).
Jeg kommer forøvrig til å fortsette min leting, men jeg tenkte at jeg kunne legge frem denne koden i tilfellet andre ville bruke den.
CSS:
.foo {
border: 5px solid #e5e5e5;
margin: 0 10px 5px 0;
-moz-border-radius: 7px;
}
Her trenger jeg ikke å opprette en div-seksjon for bildet, siden alt er lagt til rette gjennom en class=”foo” i img-koden.
Grad av popularitet: 8% [?]
|


Kommentarer(0)

