MS Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

border-image-source - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti border-image-source nastavujeme adresu k obrázku rámečku. Vlastnost se dědí.

Hodnoty

  • none (výchozí) - Rámeček nemá žádný obrázek.
  • url(adresa) - Cesta k obrázku na rámeček.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka

Vytvoříme si obyčejný div o rozměrech 300px × 100px se šířkou rámečku 10px a s hodnotou atributu border-image-slice na 30. Rámeček bude používat obrázek ramecek.png:

Obrázkový rámeček
<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                       border-image-source: url('ramecek.png');
                       border-image-slice: 30;
                       border-width: 10px;
                       width: 300px;
                       height: 100px;
                }
                </style>
                <title>border-image-source</title>
        </head>
        <body>
                <div></div>
        </body>
</html>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Výsledek:

Vlastnost border-image-source v CSS 3

Minulý zápis rámečku je poměrně dlouhý. Můžeme si ho však zkrátit. Použijeme k tomu atribut border-image:

border-image: url('ramecek.png') 30;
border-width: 10px;

Poznámka: atribut border-image-source podporují pouze novější prohlížeče. Podpora u IE je až ve verzi 11.

Více nastavení obrázkového rámečku najdete u vlastnosti border-image.


 

Všechny články v sekci
Rámeček - CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitní modifikace TruckersMP.
Aktivity (1)

 

 

Komentáře

Avatar
Jan Jedlička:29.7.2017 22:05

Ahoj, potřeboval bych poradit. at zadávám do CSS příkaz jak chci tak se mi stále nezobrazuje rámeček. Můžete mi někdo poradit? Dekuju

 
Odpovědět
29.7.2017 22:05
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Jan Jedlička
Jan Lupčík:29.7.2017 23:05

Jsi si jistý, že nastavuješ správně ten obrázek? A nastavuješ atribut border-width?

Odpovědět
29.7.2017 23:05
TruckersMP vývojář
Avatar
Jan Jedlička:29.7.2017 23:07

zkousel jsem to i s border-width

Editováno 29.7.2017 23:08
 
Odpovědět
29.7.2017 23:07
Avatar
Jan Jedlička:29.7.2017 23:11

mam to nastavene v css takto:

 
Odpovědět
29.7.2017 23:11
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jan Jedlička
Štěpán Halíř:30.7.2017 0:13

Zkus svůj CSS soubor přepsat na toto:

div {
        border: 10px solid transparent;
        width: 300px;
        height: 100px;
        border-image-source: url('ramecek.png');
        border-image-slice: 30;
}

Jak vidíš, k ostylování vlastnosti border jsem přidal slovo "solid", což představuje, že border bude bude plný (nepřerušovaný). S vlastností border-image-slice si doporučuji zkusit trošku zapohybovat a vyzkoušet si, co dokáže změna její hodnoty. :-)
Jde ti to?

Editováno 30.7.2017 0:13
Odpovědět
30.7.2017 0:13
Per aspera ad astras
Avatar
Jan Jedlička:30.7.2017 0:30

jj super, diky moc. ja uz si nad tim lamu hlavu dlouho. vsude to bylo vzdycky bylo psano bez border.

 
Odpovědět
30.7.2017 0:30
Avatar
Odpovídá na Jan Jedlička
Štěpán Halíř:30.7.2017 0:45

Dobře, jsem rád, že ti to jde. Teď už si to ale ostyluj podle sebe. Mimochodem, doporučuju se mrknout ještě na w3schools.com, kde najdeš k těmto vlastnostem i praktické ukázky.
Kdyby něco, napiš.

Odpovědět
30.7.2017 0:45
Per aspera ad astras
Avatar
Odpovídá na Štěpán Halíř
Jan Jedlička:30.7.2017 0:49

Ok ještě jednou díky. :-)

 
Odpovědět
30.7.2017 0:49
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.