Hlavní navigace

Novinky v CSS3: border radius neboli zaoblené hrany

Martin Smola

Jak se dělají na webu zaoblené hrany a co všechno je možné s nimi dosáhnout? Na toto téma je další díl z tohoto seriálu o rodině HTML5. Pojďme se společně podívat, jak posunout vzhled našich stránek zase o něco kupředu bez použití obrázků, které nás poté omezují ve změně velikosti a rozlišení stránky.

Vítám vás opět u seriálu o nových funkcích jazyků HTML, CSS a JS, který dnes doplním o další vlastnost z CSS3, a tou je border-radius, neboli volně přeloženo, podle funkce: zaoblené hrany elementů. Border rádius je velmi jednoduchá a šikovná vlastnost jazyka CSS, která nám umožňuje se posunout zase o kousek dál ve tvorbě "pure-css" grafiky na webových stránkách, tedy grafiky čistě složené z css stylů, bez potřeby obrázkových prvků.

Vlastnost border-radius popíšu jen v krátkosti, jelikož na ní není nic složitého. Tento díl zaměřím spíše na ukázky využitelnosti této vlastnosti v praxi a možnosti, které jsou díky zaobleným rohům dosažitelné.

Vlastnost zapisujeme do stylu elementu, jako všechny vlastnosti CSS. Hodnoty poloměru zaoblení zadáváme v pixelech (px) nebo v procentech (%). Pokud chceme poloměr zaoblení pro všechny rohy stejný, zapíšeme vlastnosti pouze jednu hodnotu, společnou pro všechny rohy: border-radius: 6px;. Pokud chceme zadávat pro každý roh zvlášť, zapisujeme čtyři hodnoty oddělené mezerou takto: border-radius: hornilevy hornipravy dolnipravy dolnilevy;. Toto je však zkrácený zápis vlastnosti, takže rozdílné hodnoty rohů můžeme zapisovat i v nezkrácené formě.

  • border-top-left-radius: 6px;
  • border-top-right-radius: 6px;
  • border-bottom-right-radius: 6px;
  • border-bottom-left-radius: 6px;

Další silnou zbraní této vlastnosti, je zaoblení podle elipsy. Pokud chceme zadávat zaoblení podle elipsy, stačí zapsat délku hlavní osy a za lomítko délku vedlejší osy, takto:border-radius: hlavniosa / vedlejsiosa;. Stejně tak to lze zapisovat i ve zkráceném zápisu rozdílně pro různé hrany: border-radius: hlavni1 hlavni2 hlavni3 hlavni4 / vedlejsi1 vedlejsi2 vedlejsi3 vedlejsi4;.

V následující části bych chtěl ukázat, co všechno lze vytvořit v CSS3 za pomoci jeho vlastností a border-radius.

Kruh

#kruh {
   width:200px;
   height:200px;
   border-radius:100px;
}

Čtverec

#ctverec {
   width:200px;
   height:200px;
}

Elipsa

#elipsa {
   width:200px;
   height:124px;
   border-radius:200px/124px;
}

Trojúhelník

#trojuhelnik1 {
   width:0px;
   height:0px;
   border-bottom:120px solid blue;
   border-left:60px solid transparent;
   border-right:60px solid transparent;
}
#trojuhelnik2 {
   width:0px;
   height:0px;
   border-top:120px solid blue;
   border-left:60px solid transparent;
   border-right:60px solid transparent;
}
#trojuhelnik3 {
   width:0px;
   height:0px;
   border-left:120px solid blue;
   border-top:60px solid transparent;
   border-bottom:60px solid transparent;
}
#trojuhelnik4 {
   width:0px;
   height:0px;
   border-right:120px solid blue;
   border-top:60px solid transparent;
   border-bottom:60px solid transparent;
}

Lichoběžník

#lichobeznik {
   width:80px;
   height:0px;
   border-bottom:80px solid #00CCFF;
   border-left:60px solid transparent;
   border-right:60px solid transparent;	
}

Vajíčko

#vajicko {
   height:100px;
   width:80px;
   height:100px;
   border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;	
}

Toto lze vytvářet pomocí border-radius, nalezl jsem šikovná řešení i pro jiné tvary, a tak jsem do článku zařadil například i trojúhelník, přesto že se ho přímo border-radius netýká. Tímto bych završil náš dnešní článek a přeji mnoho zdarů při vytváření webových stránek.

Našli jste v článku chybu?

3. 10. 2012 9:26

Kokeš (neregistrovaný)

Už je to pěkných pár let, co vynalezli takovou šikovnou věc - SVG se tomu říká :-)

Vitalia.cz: Taky věříte na pravidlo 5 sekund?

Taky věříte na pravidlo 5 sekund?

Lupa.cz: Brněnský radní chce zničit kartel operátorů. Uspěje?

Brněnský radní chce zničit kartel operátorů. Uspěje?

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Lupa.cz: Kdo pochopí vtip, může jít do ČT vyvíjet weby

Kdo pochopí vtip, může jít do ČT vyvíjet weby

Měšec.cz: Jak vymáhat výživné zadarmo?

Jak vymáhat výživné zadarmo?

Podnikatel.cz: Zavře krám u #EET Malá pokladna a Teeta?

Zavře krám u #EET Malá pokladna a Teeta?

Podnikatel.cz: Chtějte údaje k dani z nemovitostí do mailu

Chtějte údaje k dani z nemovitostí do mailu

Vitalia.cz: Proč vás každý zubař posílá na dentální hygienu

Proč vás každý zubař posílá na dentální hygienu

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

DigiZone.cz: ČRa DVB-T2 ověřeno: Hisense a Sencor

ČRa DVB-T2 ověřeno: Hisense a Sencor

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

120na80.cz: Co všechno ovlivňuje ženskou plodnost?

Co všechno ovlivňuje ženskou plodnost?

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

Lupa.cz: Co se dá měřit přes Internet věcí

Co se dá měřit přes Internet věcí

Měšec.cz: mBank cenzuruje, zrušila mFórum

mBank cenzuruje, zrušila mFórum

Podnikatel.cz: EET: Totálně nezvládli metodologii projektu

EET: Totálně nezvládli metodologii projektu

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá