Novinky v CSS3: border radius neboli zaoblené hrany

Martin Smola 3. 10. 2012

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;.

widgety

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?
Podnikatel.cz: Takhle se prodávají mražené potraviny

Takhle se prodávají mražené potraviny

Vitalia.cz: Voda z Vltavy před a po úpravě na pitnou

Voda z Vltavy před a po úpravě na pitnou

Lupa.cz: Patička e-mailu závazná jako vlastnoruční podpis?

Patička e-mailu závazná jako vlastnoruční podpis?

DigiZone.cz: Nova opět stahuje „milionáře“

Nova opět stahuje „milionáře“

Podnikatel.cz: Insolvence LevneElektro.cz? Začíná boj o peníze

Insolvence LevneElektro.cz? Začíná boj o peníze

Lupa.cz: Hackeři mají data z půlmiliardy účtů Yahoo

Hackeři mají data z půlmiliardy účtů Yahoo

DigiZone.cz: Funbox 4K v DVB-T2 má ostrý provoz

Funbox 4K v DVB-T2 má ostrý provoz

Lupa.cz: Aukro.cz mění majitele. Vrací se do českých rukou

Aukro.cz mění majitele. Vrací se do českých rukou

DigiZone.cz: Mordparta: trochu podchlazený 87. revír

Mordparta: trochu podchlazený 87. revír

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?

DigiZone.cz: Ginx TV: pořad o počítačových hráčích

Ginx TV: pořad o počítačových hráčích

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

Podnikatel.cz: EET pro e-shopy? Postavené na hlavu

EET pro e-shopy? Postavené na hlavu

Podnikatel.cz: Babišovi se nedá věřit, stěžovali si hospodští

Babišovi se nedá věřit, stěžovali si hospodští

Vitalia.cz: Jsou vegani a vyrábějí nemléko

Jsou vegani a vyrábějí nemléko

Podnikatel.cz: Dva měsíce na EET. Budou stačit?

Dva měsíce na EET. Budou stačit?

DigiZone.cz: Wimbledon na Nova Sport až do 2019

Wimbledon na Nova Sport až do 2019

Vitalia.cz: Muž, který miluje příliš. Ženám neimponuje

Muž, který miluje příliš. Ženám neimponuje

Podnikatel.cz: Instalatér, malíř a elektrikář. "Vymřou"?

Instalatér, malíř a elektrikář. "Vymřou"?

Podnikatel.cz: Udělali jsme velkou chybu, napsal Čupr

Udělali jsme velkou chybu, napsal Čupr