Aplicarea efectului hover la butoanele de postare

Scris de Luky la data de Mar 01 Mar 2011, 9:35 pm

Aplicarea efectului hover la butoanele de postare

Salut tuturor,
In acest tutorial am sa va explic si ofer codurile necesare pentru a putea realiza efectul hover pentru butoanele de postare, functional pe toate cele patru versiuni de teme.

Previzualizare :

Prima imagine e cea din CSS; a doua rezultatul iar a treia e rezultatul pus in functiune + text

Ok, acum urmeaza sa va ofer resursele necesare si sa va explic pasii necesari pentru a putea pune in aplicatie acest mic truc.

In primul rand aveti nevoie de un set de butoane ( galerie butoane ). Dupa ce ati uploadat butoanele pe un site si aveti link-urile la indemana iata ce trebuie sa faceti :

Navigati in :

Panou de administrare

Afisare

Imagini si culori

Culori

Foaie de stil CSS

Cod:: .buttons img{ background: url('http://i66.servimg.com/u/f66/13/46/75/82/untitl31.png') no-repeat;} .buttons img:hover{ background-position: 0px -25px;}

Atentie :
Imaginea din CSS are inaltimea de 50px iar in CSS gasiti un rand de cod : background-position: 0px -25px; <- acel numar -25px e inaltimea injumatatita a butoanelor unite din CSS de mai sus. Aveti grija sa respectati acest lucru cand veti instala alte butoane, altfel nu va functiona.

Acum ca avem fundalul butoanelor ne trebuie si un text pentru a sti pe ce buton trebuie sa dam click cand dorim sa postam un topic, raspuns etc.
Pentru acest lucru navigati in :

Panou de administrare

Afisare

Imagini si culori

Administrare Imagini

Mod avansat

Butoane

Copiati link-urile imaginilor cu text corespunzatoare fiecarei functii

Atentie : Imaginile cu text trebuie sa aiba si ele jumatatea inaltimii a butonului instalat din CSS pentru ca textul sa fie corect afisat pe buton.
Spre exemplu am sa ofer un set care se afla pe o tema de a mea pe hitskin :
Posteaza un subiect nou : http://hitskin.com/themes/15/36/36/i_post.png
Raspunde la subiect/mesaj privat : http://hitskin.com/themes/15/36/36/i_reply.png
Mesaje noi [ Blocat ] : http://hitskin.com/themes/15/36/36/i_reply_locked.png
Mesaj privat nou : http://hitskin.com/themes/15/36/36/i_msg_newpost.png

Eu deja v-am oferit un set de butoane ca exemplu, sper sa va descurcati.
Succes !

Tutorial realizat de Matei.

Numai bine,
Echipa Forumgratuit
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.
Forumurile ce vor copia sau reproduc aceste tutoriale vor fi sterse fara preaviz!