Képes szegély - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

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;

}

source a kép URL-je
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.
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ó.
outset értékével a szegély helyzete a dobozból kifelé tolható.(Safari, Opera és az IE sem támogatja.)
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