CSS3 borders, border-color

CSS3 prináša mnoho noviniek, s ktorými bude tvorba web stránok jednoduchšia a výrazne mocnejšia. Rôzne triky, ktoré sa v CSS2 len ťažko dosahujú, budú v CSS3 natívne podporované. CSS3, rovnako ako HTML5, je stále vo vývoji. Z toho dôvodu nie je podpora zo strany prehliadačov 100%-ná. Uvedené príkazy zatiaľ fungujú len s použitím prefixu, napr. u Mozilla/Firefox by ste pred každý príkaz museli napísať -moz-. Jednotlivé výsledky budem uvádzať ako obrázky.

Okraj s postupným prechodom farieb

V CSS2 takýto výsledok docielite použitím obrázkov, alebo použitím niekoľkých vrstiev, pričom každá z nich má okraj inej farby. V CSS3 to bude omnoho jednoduchšie. Každý okraj môže mať postupne spísané farby.

CSS

border: 8px solid #000;
border-bottom-colors: #555 #666 #777 #fff #999 #aaa #bbb #ccc;
border-top-colors: #555 #666 #777 #fff #999 #aaa #bbb #ccc;
border-left-colors: #555 #666 #777 #fff #999 #aaa #bbb #ccc;
border-right-colors: #555 #666 #777 #fff #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Výsledok

Okraj s postupným prechodom farieb.

Zdroj: css3.info