• Страница 1 из 1
  • 1
Стильная полупрозрачная форма входа и регистрации на CSS3 и
Дмитрий Дата: Пятница, 31.08.2012, 19:17 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий

[spoiler="Скрин"][/spoiler]

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

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

Код
<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>


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

Код
<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

Скачать

[admin]Если при нажатии на слово "Скачать"не началось скачивание то скопируйте ссылку ниже и вставьте в строку браузера! [/admin]
Код
http://gigabytes.clan.su/load-ucoz/skripts/vxod/1/1857_5en.rar
Прикрепления: 8800453.png (50.8 Kb)


From Russia With Love!
  • Страница 1 из 1
  • 1
Поиск: