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

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

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

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

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

#signup {
    width: 550px;
    height: 330px;
    margin: 100px auto 50px auto;
    padding: 20px;
    position: relative;
    background: #fff url(dаta: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);
}

#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;
}

JS

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

    <script type="text/jаvascript" 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>