Lekerekített borderek

A CSS3 beköszöntével elég sok jó dolog érkezik majd azonban, az hogy érkezik egy új keretrendszer nem jelenti azt, hogy nem kell majd trükköznünk azért, hogy minden böngészőben ugyanúgy nézzenek ki az oldalaink. Most megismertetünk mindenkit a minden böngészőben működő lekerekített élekre.
Alapvetően egyértelműen az Internet Explorer az, ami visszatartja a fejlődést a designerek számára, hiszen nagyon sokan használnak régebbi verziójú Explorert amlyek természetesen nem támogatják az új szabványokat. Az egyik ilyen örök kérdés, hogy miként tudjuk a border-eket lekerekíteni. A CSS3 alapvetően felkészült erre az apró trükkre így az Opera Firefox, Chrome Safari négyes kezeli a következő kerekítési parancsot:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

Ezzel egy 10 pixeles kerekítést adunk a borderünknek, amelyet a szokásos border -el színezhetünk vagy vastagíthatunk. Ez mindeddig igen egyszerű, de mi van az Internet Explorer-el? Nost csak a baj! Ahogy az szokott lenni, de nincs olyan probléma, amire ne lenne megoldás így erre is van.

Alapvetően a legtöbben a képes megoldásokra esküsznek, de valljuk be egy design módosításnál minden képet újra átrajzolni és beszínezni elég macerás feladat. A legjobb megoldás a CurvyCorners névre keresztelt javascriptes megoldás lehet, amely alapvetően csak Internet Explorer alatt töltődik be és teszi a dolgát minden nehézség nélkül viszi át az előbb ismertetett paramétereket a Microsoft böngészőjébe, de ennek azért ára is van. Először is maga a js sem kicsit, másodszor aa alkalmazásánál el is felejthetjük, hiszen csak lapbetöltődésekkor működik rendesen a dolog harmadszor pedig némi várakozás (1-2 sec) mindig kell, hogy Explorerünk legenerálja a görbítéseket. Mindezek ellenére ez a legjobb fellelhető megoldás, hiszen így nem kell képeket vagdalni a kereteket bármikor elszínezhetjük, módosíthatjuk a görbületet, ect. Ha minden igaz az Internet Explorer 9 már megbirkózik majd a CSS3-al, de több mint valószínű, hogy még évekig használnunk kell majd ezt a scriptet, hiszen a régebbi IE támogatása sok cégnél még mindig egy olyan dolog, ami megváltoztathatatlan.

A most bemutatott megoldás igen sokrétű a készítők honlapján megtalálhatjuk, hogy miként is lehet csak bizonyos elemek borderjeit változtatni vele, és ezen kívül még számos infót is. A leg geyszerűbb megoldás pedig így fest:


.myBox {
margin: auto;
color: #fff;
width: 60%;
padding: 20px;
text-align: center;
background-color: #f00;
border: 6px solid #fff;
/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

Így kerek a világ

Lekerekített borderek

#totalstudio