От автора: из этого учебника вы узнаете, как создать страницу с тизером (кратким рекламным объявлением завлекательного, интригующего характера – прим. перев.) при помощи одного лишь CSS, без изображений и даже без дизайна от Photoshop’а. Многие вебсайты через страницы-тизеры становятся очень популярными, поэтому добавить эту концепцию в свой инструментарий очень полезно. Применяйте ее к любому приложению или вебсайту, готовящемуся к запуску.
Шаг 1: разметка HTML
HTML страницы-тизера весьма прост. У нас есть только контейнер с вступительным текстом и полями ввода (input — ами).
|
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 |
<!doctype html> <head> <!-- Basics --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>App is coming soon.</title> <!-- Mobile --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- CSS --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/styles.css"> </head> <!-- Main HTML --> <body> <!-- Begin Page Content --> <div id="container"> <h1>App.</h1> <p> This amazing application will change your life. Subscribe to be notified when it's available, or follow us on <a href="#">Twitter.</a> </p> <div id="subscribe"> <input type="email" placeholder="email address"> <input type="submit" value="submit"> </div> </div> <!-- End Page Content --> </body> </html> |
Шаг 2: размещение и размеры элементов
Давайте определим своей странице структуру. Начнем с основ – расположим контейнер в центре страницы. Мы применим позиционирование в 50%, затем отрицательные поля, чтобы вернуть объект обратно на половину его ширины и высоты.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
html, body { width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; color: #444; -webkit-font-smoothing: antialiased; } } #container { position: fixed; width: 500px; height: 300px; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px; text-align: center; } |
Далее размещаем текст и вводы, используя селекторы атрибутов отдельно для электронной почты и input — ов подписных форм.
|
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 |
h1 { font-size: 90px; } p { width: 80%; font-size: 23px; line-height: 1.3em; margin: 1.1em auto; text-align: center; } #subscribe { margin: 0 auto; text-align: center; } input[type=email] { width: 90%; padding: 15px; margin: 0 auto; } input[type=submit] { position: absolute; margin-left: -105px; margin-top: 5px; padding: 10px; width: 100px; height: 50px; } |
Шаг 3: стили текста
Стили текста на этой странице очень простые. Нам нужно, чтобы название контрастировало с фоном, поэтому сделаем его белым. Текст важен, но нам нужно, чтобы посетители запоминали название продукта, поэтому мы не станем делать, как заявлено. Ссылка на Twitter подчеркнута, чтобы показать, что это ссылка.
Сначала основной текст:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
h1 { font-size: 90px; font-weight: bold; color: #fff; text-shadow: 0 1px 4px #000; margin-top: 20px; } p { width: 80%; font-size: 23px; line-height: 1.3em; color: #fff; margin: 1.1em auto; text-align: center; text-shadow: 0 0 2px rgba(0, 0, 0, 0.9); } |
Затем ссылка на Twitter:
|
1 2 3 4 |
p a { color: #fff; border-bottom: 2px solid #2da1ec; } |
Шаг 4: стили фона
Теперь перейдем к интересному: приданию объектам на странице дополнительной «изюминки». Начнем с создания красивого градиентного фона. Если вы пользователь Mac’а, можете положиться на GradientApp, чтобы оно проделало за вас грязную работу. Как альтернативный вариант, можно обратиться к CSS3 Please!, чтобы получить представление о синтаксисе.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
html, body { width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; color: #444; -webkit-font-smoothing: antialiased; background: #000222; background: -moz-linear-gradient(top, #000222 0%, #4b637c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c)); background: -webkit-linear-gradient(top, #000222 0%,#4b637c 100%); background: -o-linear-gradient(top, #000222 0%,#4b637c 100%); background: -ms-linear-gradient(top, #000222 0%,#4b637c 100%); background: linear-gradient(top, #000222 0%,#4b637c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 ); } |
Шаг 5: стили поля ввода
Область подписки/ввода находится в центре внимания страницы, так как нам нужно, чтобы посетители хотели знать, когда же выйдет наш удивительный продукт. Мы хотим, чтобы она, после названия или логотипа, стала центром страницы.
Начинаем со стилей «заполнителя»- placeholder (специальные стили Mozilla и Webkit), и назначаем размер шрифта:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.4); } ::-moz-input-placeholder { color: rgba(255, 255, 255, 0.4); } input { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 25px; } |
Теперь давайте назначим полю и кнопке цвет и глубину:
|
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 |
input[type=email] { outline: none; width: 90%; padding: 15px; margin: 0 auto; color: #fff; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); } input[type=submit] { position: absolute; margin-left: -105px; margin-top: 5px; font-size: 25px; color: #222; text-shadow: 0 1px 0 #fff; padding: 10px; width: 100px; height: 50px; border: none; background: #f0f0f0; background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } |
Шаг 6: добавляем переходы CSS
Давайте дополним страницу – в целях привлечения внимания посетителей – красивыми переходами CSS.
Давайте дополним страницу – в целях привлечения внимания посетителей – красивыми переходами CSS.
|
1 2 3 4 5 6 7 8 9 |
p a { color: #fff; border-bottom: 2px solid #2da1ec; } p a:hover { color: #2da1ec; border-bottom: 2px solid #fff; } |
|
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
input[type=email] { outline: none; width: 90%; padding: 15px; margin: 0 auto; color: #fff; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); } input[type=email]:hover { background: rgba(0, 0, 0, 0.5); } input[type=email]:focus { -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); -o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.6); } input[type=submit] { position: absolute; margin-left: -105px; margin-top: 5px; font-size: 25px; color: #222; text-shadow: 0 1px 0 #fff; padding: 10px; width: 100px; height: 50px; border: none; background: #f0f0f0; background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } input[type=submit]:hover { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); width: 125px; margin-left: -130px; } input[type=submit]:active { background: #c3d7ff; background: -moz-linear-gradient(top, #c3d7ff 0%, #f0f0f0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d7ff), color-stop(100%,#f0f0f0)); background: -webkit-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); background: -o-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); background: -ms-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); background: linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d7ff', endColorstr='#f0f0f0',GradientType=0 ); } |
Затем добавляем правила переходов:
|
1 2 3 4 5 6 7 8 |
p a { color: #fff; border-bottom: 2px solid #2da1ec; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } |
и
|
1 2 3 4 5 6 7 8 |
input { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 25px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } |
Шаг 7: анимация CSS
Также для получения дополнительного эффекта при загрузке страницы можно добавить красивую анимацию CSS3. Советую применять анимацию для подчеркивания дизайна, а не в качестве его неотъемлемой части. Поддержка анимации пока редка, и нужно осторожно относиться к усложнению своего проекта ради нее.
Следует добавить, что Animate.css Дэна Идена (Dan Eden) на самом деле полезная библиотека анимации CSS. Можно добавить ее, как показано, в исходный документ в начале учебника, или импортировать ее в таблицу стилей, если вам так нравится больше:
|
1 |
@import url(animate.css); |
Можно выбирать из многообразия красивой анимации, но я собираюсь добавить анимацию bounceInDown. Мы применим ее к своему элементу (в данном случае контейнеру), как тут:
|
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 |
#container { position: fixed; width: 500px; height: 300px; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px; text-align: center; -webkit-animation-name: bounceInDown; -webkit-animation-fill-mode: both; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: bounceInDown; -moz-animation-fill-mode: both; -moz-animation-duration: 1.5s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; animation-name: bounceInDown; animation-fill-mode: both; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: linear; } |
Если нужно изменить анимацию, просто меняете -animation-name на название анимации, которая вам нравится.
Шаг 8: дальнейшие шаги
Этот дизайн далек от поворотливости, и вы, возможно, захотите добавить в нижнюю часть своего css пару медиазапросов, чтобы учесть возможности небольших устройств. Подумайте насчет создания для маленьких экранов более узкого элемента контейнера и изменения ширины или места размещения вводов.
Чтобы наша форма подписки добавляла в список адрес электронной почты, можно было бы прикрутить ее к почтовому сервису рассылки новостей, такому как MailChimp. Я не буду объяснять детально, потому что все идеально демонстрируется в этой статье.
Если хотите добавить к форме валидацию данных, можете прочесть этот учебник.
Заключение
Создание страницы тизера-«приманки» вроде этой перед запуском продукта или вебсайта жизненно важно для рекламы. Она не обязана быть сложной, что доказывает данное решение с помощью чистого CSS.
Надеюсь, вы узнали что-нибудь новое из этого учебника, и спасибо за прочтение!
Автор: Ari S
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (5)