C помощью CSS3 создаем простую и приятную форму подписки.

Разметка HTML

<form id="signup">
    <h1>Тонны полезной информации для вас.</h1>
    <input type="email" placeholder="ivan.ivanov@email.com" required="">
    <input type="password" placeholder="Введите пароль" required="">
    <input type="password" placeholder="Введите пароль еще раз" required="">                 
    <button type="submit">Подписаться!</button>
</form>

В данном примере используется button вместо классического input type="submit". Так будет проще указать элемент формы без применения ID или классов.

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

CSS
В коде текста урока префиксы производителей браузеров опущены. Полный CSS код доступен в исходниках к уроку.

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

Добавлено: 28 Апреля 2018 09:33:19 Добавил: Андрей Ковальчук Нравится 0

Добавить