СТИЛЬНАЯ ФОРМА РЕГИСТРАЦИИ НА CSS3

СТИЛЬНАЯ ФОРМА РЕГИСТРАЦИИ НА CSS3


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

HTML разметка
Вот так выглядит структура html:
<form id="signup">
    <h1>Присоединитесь к нам за несколько секунд!</h1>
    <input placeholder="[email protected]" 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
Тут будет код без префиксов, полный вариант в исходниках.

СТИЛЬНАЯ ФОРМА РЕГИСТРАЦИИ НА CSS3


Для фона формы мы создали простое изображение 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);
}


СТИЛЬНАЯ ФОРМА РЕГИСТРАЦИИ НА CSS3


Необычное абстрактное оформление шапки формы:
#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>
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.