Hlavní navigace

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:

#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?

20. 9. 2012 13:15

Neříkal bych tomu "zapomněl". Prefixy jsou určeny pouze pro testování. V produkčním prostředí nemají co dělat. Naopak je správné, je nepoužívat a prostě se smířit s tím, že to staré prohlížeče nové efekty nezobrazí.

22. 9. 2012 1:26

autor (neregistrovaný)

Dobry den
Omlouvám se, ve spěchu jsem v ukázkách zapomněl dopsat prefixované styly. pokusím se vše napravit.


Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Vitalia.cz: Tesco: Chudá rodina si koupí levné polské kuře

Tesco: Chudá rodina si koupí levné polské kuře

Podnikatel.cz: Alza.cz má StreetShop. Mall.cz více výdejních míst

Alza.cz má StreetShop. Mall.cz více výdejních míst

Podnikatel.cz: Hledáte investora? Neunáhlete se

Hledáte investora? Neunáhlete se

120na80.cz: Boreliózu nelze žádným testem prokázat

Boreliózu nelze žádným testem prokázat

Vitalia.cz: Manželka je bio, ale na sex moc není

Manželka je bio, ale na sex moc není

Root.cz: Certifikáty zadarmo jsou horší než za peníze?

Certifikáty zadarmo jsou horší než za peníze?

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

Podnikatel.cz: Víme první výsledky doby odezvy #EET

Víme první výsledky doby odezvy #EET

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

Lupa.cz: Seznam mění vedení. Pavel Zima v čele končí

Seznam mění vedení. Pavel Zima v čele končí

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život

120na80.cz: Horní cesty dýchací. Zkuste fytofarmaka

Horní cesty dýchací. Zkuste fytofarmaka

Vitalia.cz: Chtějí si léčit kvasinky. Lék je jen v Německu

Chtějí si léčit kvasinky. Lék je jen v Německu

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Vitalia.cz: Často čůrá a má žízeň? Příznaky dětské cukrovky

Často čůrá a má žízeň? Příznaky dětské cukrovky

Podnikatel.cz: Podnikatelům dorazí varování od BSA

Podnikatelům dorazí varování od BSA