beállítások
Lekerekített borderek
Webes tippek, trükkök | 2010/06/03 | írta: HeNtEs

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:
< script type="text/JavaScript" src="http://www.curvycorners.net/includes/curvycorners.js">
< style>
.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

Egy blog fejlesztőknek és grafikusoknak

0
A Google már pár év óta nyilvánosságra hozza az évvégén, hogy mik is voltak azok a kifejezések, amik az adott évben ...
0
Előző cikkünknek folytatásaként, ahol megismerkedhettünk 103 valóban ötletes logóval, most bemutatunk 25 logót, ...
0
Két részes cikkbe kezdünk, amiben első körben bemutatunk kicsivel több, mint 100 olyan logót, amire ránézve - és némelyiken ...

Hírek a web világából

Ellenszenves a Google személyre szabott keresője

Kevés megértésre talált a Google azon nemrég bejelentett lépése, amelynek eredményeként az egyébként rendkívül ...

Egy kalóztörvény miatt áll a Wikipedia

Az online enciklopédia több más közösségi oldallal karöltve szerdán 24 órára leveszi az internetről angol nyelvű ...

Honlap referencia kereső

Cégünk által készített weblapokat eddig ennyien látták:
39 781 677
ebből a mai napon 23 062 látogató volt

Miért a TotalStudio?

Nálunk Ön az első
Az Ön elképzelései és a mi kreativitásunk illetve szaktudásunk a garancia arra, hogy honlapja vagy grafikai megjelenése olyan legyen amilyenre mindig is vágyott.

Több éves tapasztalat
Cégünk munkatársai több mint kilenc éve foglalkoznak webfejlesztéssel, informatikával és szerverüzemeltetéssel, ezen idő alatt mindenre felkészültünk!

Verhetetlen minőség
Munkánkban nem ismerünk kompromisszumot! Mindig a legmagasabb minőségre törekszünk. A magunkkal szemben támasztott maximalizmus és a legújabb technológiák használata garantálja, ügyfeleink elégedettségét.

Gyorsaság és megbízhatóság
Nálunk nem kell heteket várni, hiszen honlapja akár öt munkanapon belül is elkészülhet a szerződés aláírásától, de a gyorsaság soha nem megy a minőség rovására!

Csatlakozzon Facebook-on

Sablon ajánlatunk

Sablon ajánlatunk

Az oldalt a Total Studio Kft. üzemelteti. Minden jog fenntartva.
Honlapkészítés, tárhely, domain, banner, webdesign, grafika