Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de Erpel Lun 22 Oct - 10:07
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
» Salutare
Scris de Lucifer Mar 24 Apr - 11:32
Cuvinte-cheie

edit  

Rotirea avatarului la plasarea cursorului peste el


Salutare prieteni,

In tutorialul de astazi am sa va arat cum puteti personaliza avatarele in asa fel incat, in momentul cand plasati cursorul pe acestea sa se roteasca 360 grade.

Pentru inceput intrati in:
P.A. ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS ~> iar de aici depinde de versiunea forumului dumneavoastra.

Phpbb2 :
Cod:
      .poster-profile img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
        
      .poster-profile img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }



Phpbb3 :
Cod:
       div.postprofile dl dt img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
        
      div.postprofile dl dt img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

PunBB :
Cod:
       div.postprofile dl dt img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
        
      div.postprofile dl dt img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

Invision :
Cod:
       dl.postdetails dt img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
        
      dl.postdetails dt img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

Iar dupa ce ati introdus unul din codurile prezentate mai sus, nu uitati sa salvati !   





Tutorial scris de [Trebuie sa fiti inscris si conectat pentru a vedea acest link] pentru Extrem-tutorials.com .
Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.

Comentariile utilizatorilor
Membru activ
avatar
la data de Sam 8 Feb - 14:31
Teed Membru activ
Conectat
Un screen era bun.
Membru premium
avatar
la data de Dum 9 Feb - 21:04
Delight Membru premium
Conectat
Nu am ce screen sa-ti pun ...
Pur si simplu can treci cu mouse-ul peste un avatar se roteste la 360 grade.
Membru dedicat
avatar
la data de Lun 10 Feb - 13:16
mr.franta Membru dedicat
Conectat
Credeam ca mai exista un asemenea tutorial,am gasit doar pe phpbb2 deci tutorialul pare original,asteptam decizia lui Rylled
Administrator
avatar
la data de Dum 6 Apr - 12:44
Zeus Administrator
Conectat
Tutorial acceptat!
Membru ET
avatar
la data de Dum 6 Apr - 19:20
NuPermiT Membru ET
Conectat
Multumesc de cand il cautam.
Membru nou
avatar
la data de Mar 17 Iun - 17:56
AccideNtaL ' GeNius Membru nou
Conectat
Bravo, bun scriptu
Membru ET
avatar
la data de Sam 28 Mar - 12:36
hamsahaq Membru ET
Conectat
thank you sir!
Membru ET
avatar
la data de Mar 26 Dec - 11:20
Emanueltutorials Membru ET
Conectat
bravo frumos