Стильная форма регистрации на css3


Стильная форма

Простая и стильная форма для сайта. Для работы стильная форма регистрации требуется jQuery и плагинplaceholder.

Стильная форма регистрации на css3

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

HTML разметка

Вот так выглядит структура html:

<form id="signup">
    <h1>Присоединитесь к нам за несколько секунд!</h1>
    <input placeholder="email@email.com" required="" type="email">
    <input placeholder="Выберите пароль" required="" type="password">
    <input placeholder="Повторите пароль" required="" type="password">                    
    <button type="submit">Зарегистрироваться</button>    
</form>

В нашем примере мы решили использовать button, вместо классического input для отправки данных (type=»submit»), что в дальнейшем позволит нам не использовать дополнительные классы или идентификаторы, но конечно могут быть и исключения.
Placeholder — заполнитель полей ввода
HTML5 вводит поддержку таких дополнительных атрибутов, как например type=»email» или placeholder, так вот для старых браузеров существует множество заплаток HTML5 Cross Browser Polyfills, из которых мы выберем плагин Placeholder jQuery plugin от Mathias Bynens, который будет имитировать этот эффект.

 

CSS

Тут будет код без префиксов, полный вариант в исходниках.\

1355343824_css3-signup-form-background

Для фона формы мы создали простое изображение 3х4 и конвертировали его в base64 с помощью онлайн сервиса — imagetobase64converter

#signup {
    width: 550px;
    height: 330px;
    margin: 100px auto 50px auto;
    padding: 20px;
    position: relative;
    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAMAAAB883U1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7+/v7u7u////REBVnAAAAAN0Uk5T//8A18oNQQAAABZJREFUeNpiYGJiYmBiYgRiBhAGCDAAALsAFJhiJ+UAAAAASUVORK5CYII=);
    border: 1px solid #ccc;
    border-radius: 3px;  
}

#signup::before, 
#signup::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 2px;
    right: 2px;
    top: 0;
    z-index: -1;
    background: #fff;
    border: 1px solid #ccc;            
}

#signup::after {
    left: 4px;
    right: 4px;
    bottom: -5px;
    z-index: -2;
    box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
}

1355343082_css3-signup-form-header

Необычное абстрактное оформление шапки формы:

#signup h1 {
    position: relative;
    font: italic 1em/3.5em 'trebuchet MS',Arial, Helvetica;
    color: #999;
    text-align: center;
    margin: 0 0 20px;
}

#signup h1::before,
#signup h1::after{
    content:'';
    position: absolute;
    border: 1px solid rgba(0,0,0,.15);
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
}

#signup h1::after{
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;
}

И стили для элементов формы:

::-webkit-input-placeholder {
   color: #bbb;
}

:-moz-placeholder {
   color: #bbb;
}                         

.placeholder{
    color: #bbb; /* polyfill */
}        

#signup input{
    margin: 5px 0;
    padding: 15px;
    width: 100%;
    *width: 518px; /* IE7 and below */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;    
}

#signup input:focus{
        outline: 0;
        border-color: #aaa;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}        

#signup button{
    margin: 20px 0 0 0;
    padding: 15px 8px;            
    width: 100%;
    cursor: pointer;
    border: 1px solid #2493FF;
    overflow: visible;
    display: inline-block;
    color: #fff;
    font: bold 1.4em arial, helvetica;
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);          
    background-color: #2493ff;
    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); 
    transition: background-color .2s ease-out;
    border-radius: 3px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;                                    
}

#signup button:hover{
      background-color: #7cbfff;
        border-color: #7cbfff;
}

#signup button:active{
    position: relative;
    top: 3px;
    text-shadow: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}

 

javascript

Подключаем jQuery и placeholder, а также указываем к каким элементам формы применять placeholder:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        $(function() {
         $('input').placeholder();
        });    
    </script>

Источник: pcvector.net

Previous Плагин Jrating
Next Отзывчивый дизайн. Реакция на уровень освещенности

Suggested Posts

Модуль редакторов для быстрого редактирования v.2.0.1

Вертикальное многоуровневое меню для сайта

Модуль доставки Новая Почта для OpenCart 2 v 3.2

Сервисы и плагины: кросспостинг из WordPress

Модуль оплаты Интеркасса для MaxyStore и OpenCart v.1.5.3.1

Создание выпадающего мега меню на CSS3