Главная » Файлы » Прочие скрипты » CSS

Анимированные форма входа и форма регистрации пользователей на CSS3 для вашего сайта
24.06.14, 18:49:29

Скачать файл




Сразу скажу, что это просто каркасы для примеров и вам самим нужно будет правильно оформлять формы для входа и регистрации для своей CMS

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

Моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах сайта вставляйте:
Код
<link rel="stylesheet" type="text/css" href="/css/css.css" />


Следующий код в то место, где должна быть форма входа:
Код
<section>  
<div id="container_demo">  
<a class="hiddenanchor" id="toregister"></a>  
<a class="hiddenanchor" id="tologin"></a>  

<div id="wrapper">  
<div id="login" class="animate form">  
<form action="mysuperscript.php" autocomplete="on">  
<h1>Вход на сайт</h1>

   
<label for="username" class="uname" data-icon="u">Имя пользователя</label>  
<input id="username" name="username" required="required" type="text" placeholder="Имя пользователя" />  
</p>  

   
<label for="password" class="youpasswd" data-icon="p">Пароль</label>  
<input id="password" name="password" required="required" type="password" placeholder="Пароль" />  
</p>  
<p class="keeplogin">  
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />  
<label for="loginkeeping">Запомнить меня</label>  
</p>  
<p class="login button">  
<input type="submit" value="Вход" />  
</p>  
<p class="change_link">Ещё нет логина <a href="#toregister" class="to_register">Регистрация</a>  
</p>  
</form>  
</div>  
<div id="register" class="animate form">  
<form action="/index" autocomplete="on">  
<h1>Регистрация</h1>

   
<label for="usernamesignup" class="uname" data-icon="u">Имя пользователя</label>  
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="User123" />  
</p>  

   
<label for="emailsignup" class="youmail" data-icon="e">Мыло</label>  
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mail@mail.ru" />  
</p>  

   
<label for="passwordsignup" class="youpasswd" data-icon="p">Пароль</label>  
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="Любой пароль" />  
</p>  

   
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Пароль ещё раз</label>  
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="Ещё раз ваш пароль" />  
</p>  
<p class="signin button">  
<input type="submit" value="Регистрация" />  
</p>  
<p class="change_link">Уже есть логин?<a href="#tologin" class="to_register">Войти под своим логином </a>  
</p>  
</form>  
</div>  
</div>  
</div>  
  </section>


Файл из прикреплённого архива залейте в папку css

По всем вопросам адаптации данных форм для вашей CMS обращайтесь в комментариях

Материал подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: форма, анимированные, регистрации, на, Вашего, CSS3, входа, для, пользователей
Просмотров: 665 | Загрузок: 0 | Комментарии: 3 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: