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

HTML a CSS Manuál Rámeček border-image-source - Český CSS 3 manuál

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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>

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.


 

 

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.
Miniatura
Všechny články v sekci
Rámeček - CSS vlastnosti
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
IT Man
Redaktor
Avatar
Odpovídá na Jan Jedlička
IT Man: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
Cokoliv a kdokoliv může jednou uspět.
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
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  +1 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  +1 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.