CSS 3O alta tehnica interesanta vine odata cu lansarea CSS3 : border-image. Cu acest atribut poti folosi o imagine in locul borderului normal al unui element. Acest nou modul pozitioneaza foarte usor o imagine in jurul unui element.

Aceasta proprietate se utilizeaza frecvent pentru a crea butoane mai deosebite.

Va vom prezenta 3 exemple de utilizare a modulului de border-image:

Crearea unui buton cu ajutorul border-image

Vom folosi urmatoarea imagine:

Utilizarea modulului border-image este complexa, dar usor de invatat.
In exemplul urmator, 12 indica faptul ca ar trebui sa existe o lungime de border de 12px in stanga si in dreapta butonului. Pentru ca am definit valoarea width, este posibila scalarea orizontala a continutului butonului. Ne vom da seama de acest aspect cand vom introduce mai mult continut in interiorul butonului.

Pe de alta parte, valoarea 0 nu va permite scalarea pe verticala a butonului.

Sa vedem exemplul:

Codul CSS:

.my_test { border-width: 0 5 0 5;
-webkit-border-image: url(bt_green.png) 0 5 0 5 stretch stretch;
-moz-border-image: url(bt_green.png) 0 5 0 5 stretch stretch;
padding:5px;
width:300px;
}

Codul HTML:

<div class="my_test">CSS 3 previews - Border image in CSS3</div>

Rezultatul:

CSS 3 previews – Border image in CSS3

Border-image rounded

Un alt exemplu. Vom folosi imaginea preluata de pe css3info.com

Codul CSS:

.my_test {-webkit-border-image: url(borderi.png) 27 27 27 27 round round;
-moz-border-image: url(borderi.png) 27 27 27 27 round round;
padding:14px;
width:400px;
border:1em solid
}

Codul HTML:

<div class="my_test">CSS 3 previews - Border image in CSS3</div>

Rezultatul:

CSS 3 previews – Border image in CSS3

Compatibilate cu browsere

Articole similare