A CSS-ben már olyan lehetőség is elérhető, hogy egy táblázat, vagy akár egy kép kerete ne egyszínű legyen, hanem egy úgymond háttérkép jelenjen meg ott is. (eddig ugye azt tudtuk, hogyha a képnek hátteret, és paddingot adunk, az olyan, mintha kerete lenne)

Akkor, vágjunk is bele! Nem kell sokminden, csupán egy háttér, amit megadhatsz a kerethez.

.linkes{
-webkit-border-image:url(képurlje) 30 30 round; /* Safari 5 */
-o-border-image:url(képurlje) 30 30 round; /* Opera */
border-image:url(képurlje) 30 30 round;
}

A különböző sorok a különböző böngészőkben való megjelenést szolgálják. Mindhárom helyre ugyanannak a képnek az url-jét add meg. A kód nem működik Internet Explorerben!

 

Most pedig bónuszként egy olyan módot mutatok be, ahol ez a keret meg fog változni. Ehhez két háttérképre lesz szükséged, amik váltják egymást, ha rámész az egérrel.

.linkes{
-webkit-border-image:url(képurlje) 30 30 round; /* Safari 5 */
-o-border-image:url(képurlje) 30 30 round; /* Opera */
border-image:url(képurlje) 30 30 round;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
}

 

.linkes:hover{
-webkit-border-image:url(kép2urlje) 30 30 round; /* Safari 5 */
-o-border-image:url(kép2urlje) 30 30 round; /* Opera */
border-image:url(kép2urlje) 30 30 round;
}

 

Remélem, tetszett ez a kis egyszerű trükk, és jó hasznát fogjátok venni. Kérdést még mindig bármikor feltehetsz.

 


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *