DEMO |
Простенькая форма входа для юкоз, в которой всего два поля и кнопка входа. Остальные функции я не стал вставлять, так как все равно никто ими не пользуется.
Заходим в управлении дизайном в Форма входа И заменяем там все на этот код: Код <div class="form-container"> <div class="form-title"><h2>Вход</h2></div> <div class="form-title">E-mail</div> <input class="form-field" type="text" name="user" placeholder="Ваш email адрес" required/> <div class="form-title">Пароль</div> <input class="form-field" type="password" name="password" placeholder="Пароль" required/> <div class="submit-container"> <input class="submit-button" type="submit" value="Войти" name="sbm"/> </div> </div>
Теперь добавляем стилизацию для формы Ставим код CSS в ваш файл стилей: Код .form-container { border: 1px solid #ddd; background: #ebebeb; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ebebeb)); background: -webkit-linear-gradient(top, #ffffff, #ebebeb); background: -moz-linear-gradient(top, #ffffff, #ebebeb); background: -ms-linear-gradient(top, #ffffff, #ebebeb); background: -o-linear-gradient(top, #ffffff, #ebebeb); background-image: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(000,000,000,0.4) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; -moz-box-shadow: rgba(000,000,000,0.4) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; box-shadow: rgba(000,000,000,0.4) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; font-family: 'Helvetica Neue',Helvetica,sans-serif; text-decoration: none; vertical-align: middle; min-width:300px; padding:20px; width:300px; } .form-field { border: 1px solid #adadad!important; background: #f0f0f0!important; -webkit-border-radius: 3px!important; -moz-border-radius: 3px!important; border-radius: 3px!important; color: #5e5e5e!important; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px!important; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px!important; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px!important; padding:8px!important; margin-bottom:20px!important; width:300px!important; } .form-field:focus { background: #fff!important; color: #454545!important; } .form-container h2 { text-shadow: #ffffff 0 1px 0; font-size:18px; margin: 0 0 10px 0; font-weight:bold; text-align:center; } .form-title { margin-bottom:10px; } .submit-container { margin:8px 0; text-align:right; } .submit-button { border: 1px solid #adadad!important; background: #d9dbd7!important; background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#d9dbd7))!important; background: -webkit-linear-gradient(top, #f0f0f0, #d9dbd7)!important; background: -moz-linear-gradient(top, #f0f0f0, #d9dbd7)!important; background: -ms-linear-gradient(top, #f0f0f0, #d9dbd7)!important; background: -o-linear-gradient(top, #f0f0f0, #d9dbd7)!important; background-image: -ms-linear-gradient(top, #f0f0f0 0%, #d9dbd7 100%)!important; -webkit-border-radius: 4px!important; -moz-border-radius: 4px!important; border-radius: 4px!important; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0!important; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0!important; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0!important; text-shadow: #c4c4c4 0 1px 0!important; color: #454545!important; font-family: helvetica, serif!important; padding: 8.5px 18px!important; font-size: 14px!important; text-decoration: none!important; vertical-align: middle!important; } .submit-button:hover { border: 1px solid #bababa!important; text-shadow: #c9ccc6 0 1px 0!important; background: #dbdbdb!important; background: -webkit-gradient(linear, left top, left bottom, from(#f4f5f2), to(#dbdbdb))!important; background: -webkit-linear-gradient(top, #f4f5f2, #dbdbdb)!important; background: -moz-linear-gradient(top, #f4f5f2, #dbdbdb)!important; background: -ms-linear-gradient(top, #f4f5f2, #dbdbdb)!important; background: -o-linear-gradient(top, #f4f5f2, #dbdbdb)!important; background-image: -ms-linear-gradient(top, #f4f5f2 0%, #dbdbdb 100%)!important; color: #a3a3a3!important; } .submit-button:active { text-shadow: #bababa 0 1px 0!important; border: 1px solid #b9bab8!important; background: #989997!important; background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), to(#dbdbdb))!important; background: -webkit-linear-gradient(top, #a1a1a1, #989997)!important; background: -moz-linear-gradient(top, #a1a1a1, #989997)!important; background: -ms-linear-gradient(top, #a1a1a1, #989997)!important; background: -o-linear-gradient(top, #a1a1a1, #989997)!important; background-image: -ms-linear-gradient(top, #a1a1a1 0%, #989997 100%)!important; color: #1f1f1f!important; } .form-title h2 { font-size:18px!important; color: #666; text-shadow: #eee 0 1px 0; margin:0px; padding: 10px 10px; }
Все! Форма входа готова.
|
|
Добавлять комментарии могут только зарегистрированные пользователи. Регистрация | Вход
|
Полезная информация
Мы настоятельно рекомендуем вам использовать браузеры последних версий. Нажмите на иконку, чтобы перейти к скачиванию нужного вам браузера
Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px
Mozilla Firefox - один из лучших браузеров (рекомендуем)
Opera - Популярный браузер, но не полностью поддерживает CSS3
Google Chrome - один из лучших и быстрых браузеров
Safari - Качественый браузер от компании Apple
Яндекс.Браузер - браузер от Яндекс на платформе Chrome
|