Novinky v CSS3: border-image aneb obrázkový rámeček

Vítám vás u našeho dalšího dílu seriálu o novinkách v rodině HTML5, do níž patří HTML, CSS, a JS. Tentokrát se podíváme na vymoženost ohledně rámečku elementů. Tou je nová vlastnost CSS3 border-image, neboli obrázkový rámeček. Umožňuje nám vložit rastrový obrázek jako podklad pro rámeček, který bude elementu přiřazen. Vlastnosti border-image jsou především samotné border-image a border-corner-image. Jsou to zkrácené zápisy těchto vlastnosti:

• border-image:
  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

• border-corner-image:
  • border-top-left-image
  • border-top-right-image
  • border-bottom-left-image
  • border-bottom-right-image

Standardně se používá spíše jen border-image jako zkrácený zápis pro všechny tyto vlastnosti, případně je možné použít vlastnosti pro rozdílnou definici pro jednotlivé strany border-left-image a podobně.

Tag Border-image se zapisuje zkráceně následujícím způsobem:

border-image: source, slice, width, outset, repeat;

Česky tedy:

border-image: zdroj obrázku, řez, šířka, počátek, opakování;

Zdroj obrázku - source

• Zdroj obrázku je vlastně URL, která směřuje na daný obrázek, tedy hodnota zdroje je url('obrazek.png').

Řez - slice

• Řez se zpravidla v zápisu, ve standardních podmínkách, vynechává. Při použití se vyplňuje v procentech horizontálního směru a v % vertikálního směru. Lze vyplňovat i v pixelech. Pokud zadám 50% 50%, za levý hodní roh obrázku se bude považovat 50 % od leva a 50 % odshora. Obdobně i u dalších rohů.
• Hodnotu je možné zadávat v %, v px (pokud jde o rastrový obrázek) nebo ve vektorových souřadnicích (pokud jde o vektorový obraz - SVG). Lze zadávat pro všechny strany top right bottom left. Obvykle stačí zapsat pouze top, right a ostatní se odvozuje. Bottom od top a left od right.
• Záporné hodnoty nejsou akceptovány a hodnoty přesahující rozměr zdroje jsou považovány za 100% 100%.

Šířka - width

• Šířka rámečku se uvádí jako hodnoty top right bottom left. Zpravidla se zapisuje pouze top right, ostatní se vykreslují podle protilehlých (stejně jako u slice).
• Výchozí hodnota, pokud není zadána, je 1. Tedy rámeček bude mít tloušťku po celém obvodu 1px. Ještě lze zadat hodnotu auto, která za tloušťku rámečku považuje prostřední část, která vznikne po odečtení procent nebo px v definici slice.
• Lze zapsat v Px, bez jednotky (také jako px), v % nebo auto.

Počátek - outset

• Počátek se standardně nezapisuje. Funkce jsou zapisovány obdobně jako u šířky nebo u řezu. Výchozí hodnota při vynechání je 0. Touto vlastností lze posunovat počátek vykreslení rámečku.

Opakování - repeat

• Opakování má čtyři možné typy hodnot. Stretch, repeat, round, space.
  • Stretch neopakuje žádnou část rámečku, pouze ji roztáhne na potřebnou délku.
  • Repeat opakuje potřebné části podle potřebného počtu na délku elementu.
  • Round opakuje potřebné části podle potřebného počtu na délku elementu. Pokud počet opakování nevychází přesně na celá čísla, je výchozí obrázek zmenšen nebo zvětšen tak, aby opakování vycházelo na celá čísla.
  • Space opakuje potřebné části podle potřebného počtu na délku elementu. Pokud počet opakování nevychází přesně na celá čísla, je počet opakování zaokrouhlen dolů a kolem jednotlivých příček je volný prostor.

Praktická ukázka

Nyní přejdeme k praxi. Vytvoříme si pomocí této nové vlastnosti pár vzorových ukázek. Bohužel ještě není v prohlížečích podporováno bezprefixové zapsání vlastností. Pouze Chrome je schopen pochopit bezprefixovanou vlastnost. Výše zmíněná teorie pojednává obecně o tom, co je psáno ve W3C dokumentaci. Prohlížeče, ale chápou border image svým způsobem a zápis je nutno provádět tak, jak je tomu v následujícím příkladu. Repeat funguje pouze stretch a repeat.

Nejprve zkusíme pouze rámeček tloušťky 2px, který bude simulovat čárkovanou linii kolem elementu. Jako element použiji textarea, aby bylo možné si vyzkoušet jednotlivé vlastnosti repeat i při různé změně velikosti. Zde je obrázek 10px/10xp rámečku k prvnímu příkladu:

CSS stylů bude vypadat následovně:

#id_elementu{
	border-width: 2px; /* tloušťka rámečku, roh má 2 na 2px */
	border-image: url('http://i.iinfo.cz/images/456/ramecek-01.png') 2 repeat; /* Zadali jsme pouze zdroj, slice a opakování. */
}

Následující příklad je s obrázkem 30px/30px a tloušťka rámečku bude 10px. Obrázek zde: . Tento příklad zapíšeme takto:

#id_elementu{
	border-width: 10px; /* tloušťka rámečku, kulička v rohu má 10px */
	border-image: url('http://i.iinfo.cz/images/402/ramecek-02.png') 10 repeat; /* Zadali jsme pouze zdroj, slice na 10px a opakování. */
}

Touto metodou lze vytvořit i stejný výsledek našeho příkladu z minulého dílu seriálu. Pouze je nutné si upravit obrázek do této podoby. rohy mají 100px/100px a střední části vždy 10px. Obrázek má tedy 210px/210px.

Styl je následující:

#id_elementu{
	border-width: 100px; /* tloušťka rámečku, roh má 100px */
	border-image: url('http://i.iinfo.cz/images/671/ramecek-03.png') 100 repeat; /* Zadali jsme pouze zdroj, slice na 100px a opakování. */
}