Aplicarea efectului hover la butoanele de postare

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Aplicarea efectului hover la butoanele de postare

Mesaj Scris de Luky la data de Mar 1 Mar - 21:35

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!

Luky
Membru onorific
Membru onorific

masculin

Mesaje : 3556
Varsta : 28
Localizare : Bucuresti
Data de inscriere : 27/12/2007
Multumiri : 20
Niciun avertisment

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum