Novinky v CSS3: border radius neboli zaoblené hrany

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.