spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Ernest Sawyer 5.10.2011, článok je súčasťou seriálu CSS triky
Hodnoť článok:
2 0

CSS triky 2: Border radius (zaokrúhlené rohy)

Ešte stále robíte zaokrúhlené rohy cez obrázky, alebo ste nepostrehli že nám CSS3 ponúka riešenie, ktoré funguje vo všetkých prehliadačoch? Povedzme si niečo viac o border-radius.

Border-radius je hodnota, ktorá nám zaokrúhli rohy elementu. Dokonca nám dokáže zaokrúhľovať rohy obrázkov, čo tiež vie nájsť svoje využitie.

CSS3 border radius

  • Firefox 3.0+
  • Chrome 4.0+
  • Safari 3.1+
  • IE 9+
  • Opera 10.5+

CSS definícia:

.tlacitko{
-webkit-border-radius: 8px; /* definícia pre webkit jadro Safari a Chrome*/
-moz-border-radius: 8px; /* definícia pre gecko jadro Firefox */
border-radius: 8px; /* CSS3 definícia pre všetky prehliadače */
}

Takto sa nám zaokrúhlia rohy prvku všade o 8px.

Ukážka č. 1:

Zaokrúhlenie konkrétnych rohov

CSS definícia

.rozne_zaokruhlene{
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 40px 30px 20px 10px;
border-radius: 40px 30px 20px 10px;
}

Z css zápisu vidíte, že sa border-radius a -webkit-border-radius dá definovať rôzne pre všetky štyri rohy prvku, pričom prvá hodnota je pre ľavý horný roh a ostatné hodnoty idú v smere hodinových ručičiek. Hodnoty -moz-border-radius-topleft atď. sa používajú kvôli starším verziám FF.

Ukážka č.2:

Zaokrúhľovanie obrázkov

  • Firefox 3.0+
  • Chrome 4.0+
  • Safari 3.1+
  • IE 9+

CSS definícia:

.objekt img{
-webkit-border-radius: 15px; /* definícia pre webkit jadro Safari a Chrome*/
-moz-border-radius: 15px; /* definícia pre gecko jadro Firefox */
border-radius: 15px; /* CSS3 definícia pre všetky prehliadače */
}

Ukážka č. 3:
Zaklínač

Mechanizmus vykresľovania

Mechanizmus vykreslľovania pochopíte najlepšie na ukážke s kruhom.

CSS definícia takého kruhu

.kruh{
width: 150px;
height: 150px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
}

Ukážka č. 4:

Z ukážky je jasné, že sa prehnutie počíta z rohu pri hodnote 75px o 75px po X aj Y súradnici. Preto, ak chcete urobiť kruh z kocky o 200px x 200px, budete musieť nastaviť border-radius na 100px atď.

Zhrnutie

Ukázali sme si ako robiť zaokrúhlené rohy prvkov len za pomoci css. Ak však chcete optimalizovať stránku aj pre IE6, nezostáva nič iné ako vytvoriť cez IE script separátnu šablónu, v ktorej takéto prvky urobíte cez obrázky. Have a nice day ;)

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest

Ernest Sawyer Ernest Sawyer

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)


Hodnoť článok:
2 0

26 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Ernest Sawyer 11.11.2011 17:05:35
tak veru, dokonca tu je aj seriál od zakladateľa stránok o CSS3 transitions kde sa práve ukazuje ako robiť veci jQuery like cez CSS3
0 0 viťo 10.11.2011 11:22:47
CSS3 je prave o nepouzivani jquery..
0 0 viťo 10.11.2011 11:22:34
CSS3
0 0 Tomas Dolezal 10.11.2011 08:21:33
Pozrite toto http://webdesignerwall.com/tutorials/css3-image-styles je to riešené pomocou jquery, +zaujímavé efekty tam ukazujú.
0 0 Adam Kabac 9.11.2011 20:21:58
myslím že každý kto pozná css 2 tak toto pochopí celkom easy na pochopenie :)
0 0 viťo 9.10.2011 16:47:53
ci tomas, ci kto si :D
0 0 viťo 9.10.2011 16:47:44
@viktor, ja neviem vsetko.. ale fakt, taketo veci sa naozaj riesili pred 7 rokmi..
1 0 Tomáš Abaffy 8.10.2011 10:45:29
@Viktor, ale články nemusia byť iba pre teba, ktorý všetko vie. Sú ľudia, ktorí majú menej skúseností ako ty a tým takéto veci pomôžu.
0 0 viťo 6.10.2011 23:32:38
ernest.. neprekrucaj svoju nevedomost na mna..
0 0 Ernest Sawyer 6.10.2011 21:13:26
@viktor: Začať vo fóre článku kritizovať článok ako taký že je zbytočný len preto, že ty už danú problematiku ovládaš- to je ukážkový fórum trolling. Píšem o zložitejších veciach ale aj tých jednoduchších lebo NIKTO učený z neba nepadol. Ďalej už na teba reagovať nebudem lebo ako hovorím Kapitán Osveta "„Hádat se na internetu je jako závodit na paralympiádě. I když vyhrajete, pořád jste retardi.“
0 0 viťo 6.10.2011 20:51:29
ernest.. coze, pravda sa nepaci? ved pisme o html 3, preco nie?
0 0 Michal Samo Ráchela 6.10.2011 17:27:13
Ked uz to tu je, mozno stalo za zmienku spomenut, ze na pozadi td sa nevykreslia oble rohy, pokial je na tabulke border-collapse:collapse; a to iste plati aj pre elementy s display:table;.
0 0 viťo 6.10.2011 15:27:46
ernestko ok, pisme teda o.. ja neviem, o html 2.0.. super
0 0 Ernest Sawyer 6.10.2011 15:08:33
@viktor: stále neviem kam ty s tým mieriš =) Ak považuješ článok za zbytočnosť lebo je v ňom niečo pre teba samozrejmé- ok, veď to záleží subjektívne od každého či o tom už niečo vie alebo nie. Článok je tu pre tých, ktorí o tom vedia málo resp. nič.
0 0 viťo 6.10.2011 10:43:53
ernestko tie stare dobre ceske blogy, v ktorych sa dopodrobna rozoberal vyznam title, ci jednodtlivych html tagov, ci css vlastnosti uz davno neexistuju.. pixy, vit dlouhy o tychto veciach pisali uz koncom roku 2002, pozdejsie sa uz riesilo css3.. to iste, co sa riesi dnes..
0 0 Ernest Sawyer 6.10.2011 01:21:06
@viktor: s HTML/CSS "pracujem" od 13tich, takže v tej dobe som s tým už mal dočinenia. Každopádne v tej dobe to pre mňa bolo všetko o tabuľkách hlavne a zaoblené veci som riešil cez gif obrázky, ktorým som zaoblenia vyrábal gumou v gimpe alebo takom dačom. :) Také úsmevné pre mňa.

Každopádne neviem kám mieriš tým že sa to riešilo v roku 2005, kľudne sa neboj rozpísať, linkovať... :)

@matúš: dankeschoon ;)
0 0 viťo 6.10.2011 00:39:59
ernetsko, vtedy ty si este nepracoval s html/css
0 0 Matúš Koprda 6.10.2011 00:07:19
@Martin To je pekné, ale ja som názoru, že používateľom IE treba dať dôvod upgradovať a nie sa im snažiť vyhovieť ;)
@Ernest Hmm, editovanie povolím, už asi 10ty raz sa ukázalo, že je blbosť to obmedzovať
0 0 Ernest Sawyer 5.10.2011 20:29:15
viktor: v tom roku fungoval akurát tak -moz-border-radius ;)

martin: zahrniem to do nejakého IE hack špeciálu, ďakujem za link ;)
Zajtra.sk > Programovanie > CSS/HTML > CSS triky 2: Border radius (zaokrúhlené rohy)


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama