Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 831 | Загрузок: 0 | Комментарии: 6 | |
Всего комментариев: 0 | |
| |