Peste 500 tutoriale in limba romana.

Pentru cei care nu stiu prea bine css, am extras din tema lui [Trebuie sa fiti inscris si conectat pentru a vedea acest link] de pe Hitskin acest efect dragut de miscare al bannerului.

Phpbb3 & Invision:

Cod:

#logo {
  float: left;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-repeat: no-repeat;
}


#logo:hover {
  -webkit-transform:translate(60px);
  -moz-transform: translate(60px);
  -o-transform:translate(60px);
 }

#logo:active {
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
}

PunBB:

Cod:

#pun-logo {
  float: left;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-repeat: no-repeat;
}


#pun-logo:hover {
  -webkit-transform:translate(60px);
  -moz-transform: translate(60px);
  -o-transform:translate(60px);
 }

#pun-logo:active {
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
}

Phpbb2:

Cod:

#i_logo {
  float: left;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-repeat: no-repeat;
}


#i_logo:hover {
  -webkit-transform:translate(60px);
  -moz-transform: translate(60px);
  -o-transform:translate(60px);
 }

#i_logo:active {
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
}

Minunat efectul,merge perfect!Multumesc Sankez!

thumb_upîmi placethumb_downnu îmi place

Re: Miscare logo din partea stanga in partea dreapta
iAngelMier 19 Oct - 16:59

Bun codul, l-am folosit cel pentru phpBB3. Mulțumesc!

thumb_upîmi placethumb_downnu îmi place

Re: Miscare logo din partea stanga in partea dreapta
roBiino =p~Sam 5 Noi - 15:45

e mult prea lung
asta e mai simplu si mai scurt

Cod:

#logo {
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
#logo:hover {
margin-left: 100px;
}

0.5s - reprezinta viteza de deplasare, poate fi si 1s sau sub o secunda ms, ex: 0.1s
margin-left: 100px; - reprezinta distanta de la stanga la dreapta, deplasarea.

Cat desptre info, fii serios, e un cod, nu poti avea drepturi de autor asupra lui, e ca si cum ai da in judecata pe cei de la css3maker sau alte site-uri de animatii css3, ca doar de acolo le-ai luat.

thumb_upîmi placethumb_downnu îmi place

Re: Miscare logo din partea stanga in partea dreapta
Alexandru MironVin 23 Mar - 10:26

Re: Miscare logo din partea stanga in partea dreapta
Continut sponsorizat