Principala » fisiere » Scripturi » Ucoz [ Adauga un material nou ]

Стильная полупрозрачная форма входа и регистрации на CSS3 и jQuery

2011-02-17, 3:38 PM

Стильная полупрозрачная форма входа для вашего сайта. Будет просто замечательно смотреться на тёмных дизайнах

Для начала посмотрите Демо

Установка:

После /head на нужных страницах вставляйте:

Code
<link href="/css/style.css" rel="stylesheet" />  
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>  
   
<script language="javascript">  
$(document).ready(function() {  
   
  $('#nav-bar').fadeIn();  
   
  $('#Log-in').click(function() {  
   
  $('#Log-in').css('background-color', '#006699');  
  $('#signUp').css('background-color', '#000000');  
  $('#submit').hide().css({'left' : '0px'});  
  $('#SignupForm').hide().css({'top' : '0px'});  
   
  $('#login').show().animate({  
   
  left : '52%',  
   
  },400,function(){  
   
  $('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  
   
  });  
  ///  
  $('#Login_form').show().animate({  
   
  top : '60px',  
   
  },700,function(){  
   
  //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
  });  
  });  
   
  $('#signUp').click(function() {  
   
  $('#signUp').css('background-color', '#006699');  
  $('#Log-in').css('background-color', '#000000');  
  $('#login').hide().css({'left' : '0px'});  
  $('#Login_form').hide().css({'top' : '0px'});  
   
  $('#submit').show().animate({  
   
  left : '52%',  
   
  },400,function(){  
   
  $('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  
   
  });  
  ///  
  $('#SignupForm').show().animate({  
   
  top : '60px',  
   
  },700,function(){  
   
  //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
  });  
  });  
   
});  
</script>

Следующий код в то место, где будет сама форма входа и регистрации:

Code
<img src="/images/result.png" id="login" />  
  <img src="/images/submit.png" id="submit" />  
   
  <div class="loginform" id="Login_form">  
   
  <form method="post" action="#">  
   
  <div>  
   
  <div class="form-item">  
   
  <label for="edit-name">Логин:</label>  
  <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
  </div>  
   
  <div class="form-item">  
   
  <label for="edit-pass">Пароль:</label>  
  <input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">  
  </div>  
   
  </div>  
  </form>  
   
  </div>  
   
  <div class="loginform" id="SignupForm">  
   
  <form method="post" action="#">  
   
  <div>  
  <div class="form-item">  
   
  <label for="edit-name">Мыло:</label>  
  <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
  </div>  
   
  <div class="form-item">  
   
  <label for="edit-name">Логин:</label>  
  <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">  
  </div>  
   
  <div class="form-item">  
   
  <label for="edit-pass">Пароль:</label>  
  <input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">  
  </div>  
   
  </div>  
  </form>  
   
  </div>  
   
  <div id="nav-bar">  
   
  <div class="module-bg">  
  <a href="#" class="TopButtons" id="Log-in">Войти</a>  
  <a href="#" class="TopButtons" id="signUp">Зарегистрироваться</a>  
  </div>  
   
  </div>

Сразу предупреждаю, что форма входа и форма регистрации не Ucoz'овские и адаптировать свои формы входа вам придётся самим.
Осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images

Скачать материал: "Стильная полупрозрачная форма входа и регистрации на CSS3 и jQuery"



Categorie: Ucoz | Adaugat de: kopceak
Vizualizari: 2138 | Downloads: | Raging: 5.0/1
Total comentarii : 0
Doar utilizatorii inregistrati pot comenta
[ Inregistrare | Login ]
Schimbul de fişiere este realizat de către utilizatorii site-ului, administraţia nu poartă nici o răspundere pentru conţinutul acestora sau pentru prejudiciile provocate. INTERFILM.MD nu dispune de conţinutul pus la schimb de către utilizatori, ci doar este un catalog al resurselor. Vă atenţionăm să nu încărcaţi pe site fişiere protejate de drepturile autorului sau fişiere cu conţinut ilegal. În cazul în care sunteţi deţinătorul drepturilor de autor al unui torrent şi doriţi să fie şters vă rugăm să ne scrieţi la adresa abuse@interfilm.md şi imediat se vor lua măsuri. Întregul text privind regulile şi condiţiile de utilizare a siteului poate fi găsit aici.