TotalInfo - totalinfo.hu
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

3
A jQuery szó mi szó a legjobbnak mondható JS keretrendszer napjainkban, azonban azért vannak érdekes dolgai. Ezúttal ...
1
Érdekes hibaüzenetre bukkanhattak a Google Maps ot alkalmazó felhasználók fire bug jukban "tick is not defined". Vajon ...
1
Ezúttal egy nagyon kényes témára szeretnénk evezni, a legtöbb embert a böngészők osztanak meg mindenki valamire ...

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

Itt a Google Chrome 6

Pontosan két évvel ezelőtt robbant be a piacra a Google a saját böngészőjével, azóta sok víz lefolyt a dunán és a mai nappal ...

15 éves az Internet Explorer

Tizenöt évvel ezelőtt, augusztus 16-án jelent meg az Internet Explorer (IE), amely a weblap-megjelenítők kiélezett ...

Honlap referencia kereső

Cégünk által készített weblapokat eddig ennyien látták:
5 200 660
ebből a mai napon 12 704 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!

Sablon ajánlatunk

Sablon ajánlatunk

Az oldalt a Total Gaming Kft. üzemelteti. Minden jog fenntartva.