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 01.03.11 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 :
Aplicarea efectului hover la butoanele de postare Prev10
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 :
Aplicarea efectului hover la butoanele de postare Gocss10
Aplicarea efectului hover la butoanele de postare Go-jum10Panou de administrare Aplicarea efectului hover la butoanele de postare Arrow10 Afisare Aplicarea efectului hover la butoanele de postare Arrow10 Aplicarea efectului hover la butoanele de postare Images_couleurs Imagini si culori Aplicarea efectului hover la butoanele de postare Arrow10 Culori Aplicarea efectului hover la butoanele de postare Arrow10 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 :
Aplicarea efectului hover la butoanele de postare Go-jum10Panou de administrare Aplicarea efectului hover la butoanele de postare Arrow10 Afisare Aplicarea efectului hover la butoanele de postare Arrow10 Aplicarea efectului hover la butoanele de postare Images_couleurs Imagini si culori Aplicarea efectului hover la butoanele de postare Arrow10 Administrare Imagini Aplicarea efectului hover la butoanele de postare Arrow10 Mod avansat
Aplicarea efectului hover la butoanele de postare Arrow10 Butoane
Aplicarea efectului hover la butoanele de postare Arrow10 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

Luky
Membru onorific
Membru onorific

Mesaje : 3556
Varsta : 30
Localizare : Bucuresti
Data înscrierii : 27/12/2007
Multumiri : 24
Niciun avertisment

Vezi profilul utilizatorului
Luky a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum