Создаем форму подписки с помощью CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Несмотря на использование CSS3, форма корректно отображается практически во всех браузерах. Для начала мы рассмотрим структуру HTML. В данном примере используется buttton вместо классического input type="submit". Так будет проще указать элемент формы без применения ID или классов.

<form id="signup">
 <h1>Много полезной информации для веб-дизайнера</h1>
 <input type="email" placeholder="admin.rudebox@gmail.com" required="">
 <input type="password" placeholder="Введите пароль" required="">
 <input type="password" placeholder="Введите пароль еще раз" required="">
 <button type="submit">Подписаться на новости!</button>
 </form>

<h1>Много полезной информации для веб-дизайнера</h1>

<button type="submit">Подписаться на новости!</button>

</form>

В HTML5 есть такие атрибуты как, type=»email», placeholder или required. Для реализации текста по умолчанию в полях ввода в старых браузерах в проекте используется плагин jQuery Placeholder.

Создаем форму подписки с помощью CSS3

Для создания фона был разработан шаблон — изображение 3x4. Затем шаблон преобразовали в строку base64 с помощь онлайн сервиса Image to Base64 Converter. А строка используется в установках фона для элемнета #signup. Для имитации стопки бумаги используются псевдо-элементы ::before и ::after.

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

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

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

::-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;

}

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Создаем форму подписки с помощью CSS3

Читайте также:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

Создаем форму подписки с помощью CSS3

Читайте также:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи