Все для веб-дизайнера
Создаем форму подписки с помощью CSS3
Форма подписки является неотъемлемой частью любого сайта, форму можно встретить буквально на каждом сайте, и это не удивительно, ведь она позволяет вернуть пользователей на сайт, сообщив им о новых материалах или комментариях, в данном уроке мы рассмотрим как стилизовать форму подписки придав ей элегантный вид. Также в форме будут использоваться подсказки, которые будут уведомлять о неправильно заполненном поле. Данную форму легко редактировать, и легко настроить под дизайн своего сайта.
Несмотря на использование CSS3, форма корректно отображается практически во всех браузерах. Для начала мы рассмотрим структуру HTML. В данном примере используется buttton вместо классического input type="submit". Так будет проще указать элемент формы без применения ID или классов.
|
1 2 3 4 5 6 7 |
<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> |
В HTML5 есть такие атрибуты как, type=»email», placeholder или required. Для реализации текста по умолчанию в полях ввода в старых браузерах в проекте используется плагин jQuery Placeholder.
Для создания фона был разработан шаблон — изображение 3x4. Затем шаблон преобразовали в строку base64 с помощь онлайн сервиса Image to Base64 Converter. А строка используется в установках фона для элемнета #signup. Для имитации стопки бумаги используются псевдо-элементы ::before и ::after.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#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); } |
Для нашей формы будем использовать вот такой заголовок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#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; } |
Теперь создадим простой градиент для кнопки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
::-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; } |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 22.03.2012 в 19:38, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
