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

Martin Smola 20. 9. 2012

Další díl našeho seriálu o zajímavých vlastnostech HTML5 se bude zabývat dlouho postrádanou vlastností CSS, která se jen těžko něčím nahrazovala. Nyní je konečně k použití na vašich reálných internetových stránkách. Pojďme se podívat, jak takzvaný obrázkový rámeček funguje a na co ho můžeme použít.

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:

widgety

#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í. */
}
Našli jste v článku chybu?
Lupa.cz: Kde leží hardwarový pupek světa?

Kde leží hardwarový pupek světa?

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

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

Podnikatel.cz: „Lex Babiš“ Babišovi paradoxně pomůže

„Lex Babiš“ Babišovi paradoxně pomůže

Podnikatel.cz: ČSSZ posílá přehled o důchodovém kontě

ČSSZ posílá přehled o důchodovém kontě

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

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

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

Mordparta: trochu podchlazený 87. revír

Vitalia.cz: dTest odhalil ten nejlepší kečup

dTest odhalil ten nejlepší kečup

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

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

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

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

Root.cz: Hořící telefon Samsung Note 7 zapálil auto

Hořící telefon Samsung Note 7 zapálil auto

Vitalia.cz: 5 chyb, které děláme při skladování potravin

5 chyb, které děláme při skladování potravin

DigiZone.cz: DVB-T2 ověřeno: seznam TV zveřejněn

DVB-T2 ověřeno: seznam TV zveřejněn

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

Udělali jsme velkou chybu, napsal Čupr

Lupa.cz: Jak se prodává firma za miliardu?

Jak se prodává firma za miliardu?

DigiZone.cz: Parlamentní listy: kde končí PR...

Parlamentní listy: kde končí PR...

Lupa.cz: Jak levné procesory změnily svět?

Jak levné procesory změnily svět?

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

Nova opět stahuje „milionáře“

Vitalia.cz: Tahák, jak vyzrát nad zápachem z úst

Tahák, jak vyzrát nad zápachem z úst

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: Antibakteriální mýdla nepomáhají, spíš škodí

Antibakteriální mýdla nepomáhají, spíš škodí