marți, 23 decembrie 2008

Glossy rollover buttton

Salut!

M-am gandit ca daca vorbim despre interfete, ar fi interesant sa vedem si cum putem realiza cateva elemente grafice pentru acestea.

Programul cel mai popular si probabil si cel mai indicat pentru acest lucru este Adobe Photoshop. Insa si un utilizator al altui soft de procesare grafica destul de complex va putea urma pasii descrisi in continuare.

Si acum sa trecem la cazul concret. Vom realiza un buton glossy dragut in Adobe Photoshop si folosind si putin css va rezulta un rollover button grozav :).

Pentru realizarea butonului apelam la un tutorial foarte simplu pe care il gasiti aici : http://www.tutorialized.com/view/tutorial/Menu-Bar/38920

Iata rezultatul muncii mele :)








Iar folosind un tag style si si un div cu id-ul corespunzator in felul urmator, integram
butonul nou creat intr-o pagina web.

#home a{
overflow:hidden;
left:0px;
width:174px;
height:91px;
display:block;
background:transparent url(buton1.jpg) no-repeat;
}

#home a:hover {
background:transparent url(buton2.jpg) no-repeat;
}



Un comentariu:

Nightcrawler spunea...

nu e mai simplu cu clasicul javascript? OnMouseOver, OnClick,etc?