Создайте с помощью CSS3 страницу с роскошным тизером-приманкой

создание тизера с помощью CSS3

От автора: из этого учебника вы узнаете, как создать страницу с тизером (кратким рекламным объявлением завлекательного, интригующего характера – прим. перев.) при помощи одного лишь CSS, без изображений и даже без дизайна от Photoshop’а. Многие вебсайты через страницы-тизеры становятся очень популярными, поэтому добавить эту концепцию в свой инструментарий очень полезно. Применяйте ее к любому приложению или вебсайту, готовящемуся к запуску.

скачать исходникидемо

Шаг 1: разметка HTML

HTML страницы-тизера весьма прост. У нас есть только контейнер с вступительным текстом и полями ввода (input — ами).

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Шаг 2: размещение и размеры элементов

Давайте определим своей странице структуру. Начнем с основ – расположим контейнер в центре страницы. Мы применим позиционирование в 50%, затем отрицательные поля, чтобы вернуть объект обратно на половину его ширины и высоты.

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

Шаг 3: стили текста

Стили текста на этой странице очень простые. Нам нужно, чтобы название контрастировало с фоном, поэтому сделаем его белым. Текст важен, но нам нужно, чтобы посетители запоминали название продукта, поэтому мы не станем делать, как заявлено. Ссылка на Twitter подчеркнута, чтобы показать, что это ссылка.

Сначала основной текст:

Затем ссылка на Twitter:

Шаг 4: стили фона

Теперь перейдем к интересному: приданию объектам на странице дополнительной «изюминки». Начнем с создания красивого градиентного фона. Если вы пользователь Mac’а, можете положиться на GradientApp, чтобы оно проделало за вас грязную работу. Как альтернативный вариант, можно обратиться к CSS3 Please!, чтобы получить представление о синтаксисе.

Шаг 5: стили поля ввода

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

Начинаем со стилей «заполнителя»- placeholder (специальные стили Mozilla и Webkit), и назначаем размер шрифта:

Теперь давайте назначим полю и кнопке цвет и глубину:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Шаг 6: добавляем переходы CSS

Давайте дополним страницу – в целях привлечения внимания посетителей – красивыми переходами CSS.

Давайте дополним страницу – в целях привлечения внимания посетителей – красивыми переходами CSS.

Затем добавляем правила переходов:

и

Шаг 7: анимация CSS

Также для получения дополнительного эффекта при загрузке страницы можно добавить красивую анимацию CSS3. Советую применять анимацию для подчеркивания дизайна, а не в качестве его неотъемлемой части. Поддержка анимации пока редка, и нужно осторожно относиться к усложнению своего проекта ради нее.

Следует добавить, что Animate.css Дэна Идена (Dan Eden) на самом деле полезная библиотека анимации CSS. Можно добавить ее, как показано, в исходный документ в начале учебника, или импортировать ее в таблицу стилей, если вам так нравится больше:

Можно выбирать из многообразия красивой анимации, но я собираюсь добавить анимацию bounceInDown. Мы применим ее к своему элементу (в данном случае контейнеру), как тут:

Если нужно изменить анимацию, просто меняете -animation-name на название анимации, которая вам нравится.

Шаг 8: дальнейшие шаги

Этот дизайн далек от поворотливости, и вы, возможно, захотите добавить в нижнюю часть своего css пару медиазапросов, чтобы учесть возможности небольших устройств. Подумайте насчет создания для маленьких экранов более узкого элемента контейнера и изменения ширины или места размещения вводов.

Чтобы наша форма подписки добавляла в список адрес электронной почты, можно было бы прикрутить ее к почтовому сервису рассылки новостей, такому как MailChimp. Я не буду объяснять детально, потому что все идеально демонстрируется в этой статье.

Если хотите добавить к форме валидацию данных, можете прочесть этот учебник.

Заключение

Создание страницы тизера-«приманки» вроде этой перед запуском продукта или вебсайта жизненно важно для рекламы. Она не обязана быть сложной, что доказывает данное решение с помощью чистого CSS.

Надеюсь, вы узнали что-нибудь новое из этого учебника, и спасибо за прочтение!

Автор: Ari S

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (5)

  1. Pocherk

    Animate.css порадовала. Надо будет с ней поиграться. Спасибо за полезный урок!

  2. Дмитрий

    Перед этой статьёй вы должны были дать поясняющий урок. Я — верстальщик с 8-летним стажем, понял только начало статьи. А всё остальное — это новшевства CSS3. Если хотите, чтобы читатели разберались в предмете, то дайте пояснения к каждой строки. Я не собираюсь заниматься тупым копированием стилей, где я понимаю на 50%. Считаю тему урока полезной, но не раскрытой. Вот к чему всё это?
    Поясните, пожалуйста, хотя бы кратко, каждый стиль CSS3.
    С уважением, Ваш подписчик.

    • Андрей Кудлай

      Извините, но эта статья переводная и дается как есть. По CSS 3 у нас на сайте в разделе Премиум выкладываются уроки одноименного цикла.

  3. Sergio

    В мозиле все работает, а в chrome как будто css не подгружается, почему так?

    • Андрей Кудлай

      Только что проверил, Хром (Версия 32.0.1700.107 m), все работает нормально.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree