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.
