Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Serie Tutoriale CSS
Scris de Hachiy Dum 15 Ian - 16:59
» Wireless ipb theme [punBB]
Scris de vi01239984564 Mar 10 Ian - 11:50
» Summer v1.1 theme
Scris de vi01239984564 Mar 10 Ian - 9:57
» Va place acest forum? [Subiect Unic]
Scris de Andrei34 Vin 6 Ian - 0:21
Cuvinte-cheie

tema  legenda  menu  Bara  subiecte  cautare  navigare  radio  punbb  chenar  animate  meniu  tutorial  Mesaje  reclama  Metin2  avatar  edit  profil  phpBB2  html  banner  Statistici  subforumuri  ultimele  drop  

Login script Modificat de Frat3l3.e


Buna !
Mam apucat si eu de scripting
si vreau sa va arat un script modificat de bine cu efectele luate si mici elemente
site (efects and elements) : [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Script:
Cod:
<form>
  <div class="dynamiclabel">
    <input id="name" placeholder="Name" type="text">
    <label for="name">Name</label>
  </div>

  <div class="dynamiclabel">
    <input id="password" placeholder="Password" type="text">
    <label for="password">password</label>
  </div>
  <span style="font-size: 80%">*Note: Please make sure it's correctly
entered!</span>
</div>

<form>
<input typ
e="submit" class="formbutton" value="Submit" />
</form>
<style type="text/css">
.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;
background:url(media/formbg.gif) repeat-x left top;
}
</style>





<style>
form div.dynamiclabel{ /* div container for each form field with pop up label */
  display: block;
  margin: 30px;
  font: 16px;
  position: relative;
}


form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea{
  width: 320px;
  padding: 10px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
}

form div.dynamiclabel textarea{
  height: 200px;
}


form div.dynamiclabel label{ /* pop up label style */
  position: absolute;
  left: 0;
  background: lightyellow;
  border: 1px solid yellow;
  border-radius: 2px;
  padding: 3px 10px;
  box-shadow: 4px 1px 5px gray;
  font-weight: bold;
  -webkit-backface-visibility: hidden;
  top: 10px; /* initial top position of label relative to dynamiclabel container */
  -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  z-index: -1;
}


form div.dynamiclabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */
  border: 1px solid #45bcd2;
  box-shadow: 0 0 8px 2px #98d865;
}


form div.dynamiclabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */
  opacity: 1;
  z-index:100;
  top: -35px; /* Post top position of label on focus relative to dynamiclabel container */
  -ms-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

</style>
Demo :  [Trebuie sa fiti inscris si conectat pentru a vedea aceasta imagine]


Tutorial scris de [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Copyright Extrem-Tutorials.com - Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.

Comentariile utilizatorilor
Membru activ
la data de Mier 18 Dec - 15:51
iAngel Membru activ
Conectat
E frumos,felicitari,dar,daca il punem intr-o pagina HTML ,va functiona?
Daca da,daca utilizatorul este deja logat,va fi redirectionat?
Membru veteran
la data de Mier 18 Dec - 16:07
Zink. Membru veteran
Conectat
Iangel dac il pune intr-o pagina html mere dac nu stiu cu utilizatoru asta nu am incercat
Membru activ
la data de Mier 18 Dec - 22:48
iAngel Membru activ
Conectat
Mersi oricum.
Membru ET
la data de Sam 21 Dec - 17:09
400kg Membru ET
Conectat
Bravo , daca tot teai apucat de scripting mai astept si alte tutoriale