HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Képes szegély



A szegélyek egy-egy kép felhasználásával is megvalósíthatók.

A képes szegély beállításának szabványos alakja:

kijelölő
{
border-image
:
source
slice
/ width
/ outset
repeat;
}

  1. source a kép URL-je
  2. slice a kép szegélyként felhasználható 4 szélének szélessége.A felső, a jobboldali, az alsó és a baloldali sávok méretét.
    Ezek találkozásánál a négy sarok tartalmának helye is egyértelművé válik.
    A középső területtel együtt a slice értékei 9 = 4 + 4 +1 területet határoznak meg. Megadható pixelben (px nélkül), vagy %-ban.
    Különböző érték adható a 4 oldalra, vagy 2 irányra. Azonos érték használata esetén összevonható.
    A fill kulcsszó megadása esetén a kép középső része is megjelenítésre kerül, felülírva a háttérképet.
  3. width a HTML elem képes szegélye szélességének beállítására szolgál, ami eltérhet a szegély megvalósítására használt képcsík szélességétől.
    Megadható képpontban, százalékban vagy az auto kulcsszóval. Utóbbi esetben a szegély szélessége azonos lesz a kép kijelölt darabjának szélességével. A négy oldalra külön is beállítható.
  4. outset értékével a szegély helyzete a dobozból kifelé tolható.(Safari, Opera és az IE sem támogatja.)
  5. repeat E tulajdonsággal adható meg, hogy a szegélyhez használt kép egyes elemei a rendelkezésre álló területet miként töltsék ki. A vízszintes és a függőleges szegélyekre külön is megadható.
    1. stretch = a kép kijelölt területeit akkorára nyújtja, hogy kitöltsék a területet.
    2. repeat = a kép kijelölt területeit annyiszor ismétli, hogy kitöltsék a területet.
    3. round = a kép kijelölt területeit annyiszor ismétli, hogy kitöltsék a területet, miközben átméretezi annak érdekében, hogy mindannyiszor a teljes képterület jelenjen meg. (Ne legyenek befejezetlen motívumok.)
A szabványos megadási módot nem minden böngésző támogatja teljes formájában, ezért érdemesé a szegély szélességének beállítását a korábban megismert módon elvégezni és a fenti alakból csupán URL, a slice és a repeat jellemzőket megadni a következőképpen.

A képes szegély beállításának bongészőfüggetlen alakja:

kijelölő
{
border
:
width(pl. 47px)
solid
transparent;
}

kijelölő
{
border-image
:
source
slice
repeat;
}

Háttéképünk:


A gömbök átmérője 34px.

1. példa:

Forráskód



<style>
   div { width: 160px; height: 105px;
            border:34px solid transparent;}
  #id_0 {-webkit-border-image:url(hatterkep_1.png) 34 34 stretch;
              -o-border-image:url(hatterkep_1.png) 34 34 stretch;
            -moz-border-image:url(hatterkep_1.png) 34 34 stretch;
                 border-image:url(hatterkep_1.png) 34 34 stretch;} 
  #id_1 {-webkit-border-image:url(hatterkep_1.png) 34 34 repeat;
              -o-border-image:url(hatterkep_1.png) 34 34 repeat;
            -moz-border-image:url(hatterkep_1.png) 34 34 repeat;
                 border-image:url(hatterkep_1.png) 34 34 repeat;}
  #id_2 {-webkit-border-image:url(hatterkep_1.png) 34 34 round;
              -o-border-image:url(hatterkep_1.png) 34 34 round;
            -moz-border-image:url(hatterkep_1.png) 34 34 round;
                 border-image:url(hatterkep_1.png) 34 34 round;} 
  #id_3 {-webkit-border-image:url(hatterkep_1.png) 34 34 repeat stretch; 
              -o-border-image:url(hatterkep_1.png) 34 34 repeat repeat stretch; 
            -moz-border-image:url(hatterkep_1.png) 34 34 repeat stretch;
                 border-image:url(hatterkep_1.png) 34 34 repeat stretch;}
</style>     
...
<body>    
     <div id="id_0">stretch </div> 
     <div id="id_1">repeat</div>
     <div id="id_2">round</div>  
     <div id="id_3">repeat stretch</div> 
</body>
 

Eredmény*

2. példa:

Forráskód



<style>
 div { width: 160px; height: 105px;
            border:34px solid transparent;}
 #id_0 {-webkit-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch;
             -o-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch; 
           -moz-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch;
                border-image:url(hatterkep_1.png) / 17px 17px stretch;} 
 #id_1 {-webkit-border-image:url(hatterkep_1.png) 34 34 / 17px 17px / 0.5 1 stretch;
             -o-border-image:url(hatterkep_1.png) 34 34 / 17px 17px stretch;
           -moz-border-image:url(hatterkep_1.png) 34 34 / 17px 17px /  0.5 1 stretch;
                border-image:url(hatterkep_1.png) / 17px 17px /  0.5 1 stretch;}   
</style>     
...
<body>    
     <div id="id_0">stretch </div> 
     <div id="id_1">repeat</div>
</body>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_kepes_1.html