[Урок: 1] Учимся делать сайт тизер на CSS3

Опубликовал: 6 лет назад HTML

Добрый день дорогие друзья и читатели блога Виктора Доценко

В этом маленьком уроке вы узнаете, как быстро создать тизер страницы, используя  при этом только CSS, без использования изображений. Многие разработчики перед запуском сайта или продукта привлекает пользователей и будущих потенциальных клиентов с помощью широко используемых сейчас — тизерных страниц. И сегодня Вы овладеете концепцией создания тезерных страничек.Используйте его для любых приложений или веб-сайтов, который скоро будут готовы у вас к запуску.

Тема: HTML5, CSS3
Сложность: низкая
Требуется время: 30-45 минут

 

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

Быстренько набросаем HTML код нашей будущей странички:

 Шаг 2: Позиционирование и размеры наших элементов

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

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

 Шаг 3: Стилизация текста

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

Теперь пропишем стиль для нашей ссылки:

 Шаг 4: Стилизуем задний фон

Теперь переходим к самому интересному: мы создадим приятный градиентный фон. Если вы являетесь обладателем Mac вы всегда можете использовать  GradientApp  — это поможет сделать за вас всю тяжелую работу. Так же существует бесплатные альтернативы и для пользователей Windows. Кроме всего этого я советую Вам прочитать информацию на данном сайте, чтобы иметь некоторое представление о синтаксисе CSS3.

 Шаг 5: Стилизуем форму подписки на рассылку

Форма подписки у нас на странице находится в центре внимания  и мы хотим, чтобы посетитель всегда мог узнать, когда наш продукт будет запущен. Мы начинаем нашу работу с элементом placeholder (Mozilla и Webkit), и установив размер шрифта:

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

 Шаг 6: Добавление переходов

Давайте добавим несколько интересных решений для того, чтобы привлечь внимание пользователей:

Во-первых добавим активное и посещенное состояние для нашей ссылки:

 

 Теперь добавляем правила перехода:

и

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

Мы можем так же добавить некоторые интересные CSS3 анимации для создания дополнительного эффекта при загрузке страницы.

Желательно добавлять CSS анимацию, которая хорошо впишется в дизайн вашего сайта. Вы должны так же помнить, что анимации все еще тестируются разными браузерами и иногда не стабильны, поэтому используйте только проверенные и качественные библиотеки и которые не сильно загрузят ваш сайт. Анимация Дана Идина (Animate.css) является действительно полезной библиотекой анимации. Вы можете добавить его себе в исходном коде или же импортировать его в свои таблицы стилей, если вы предпочтете:

CSS

 Существует множество красивых анимации на выбор, но я собираюсь добавить bounceInDown анимацию. Мы применим к нашему контейнеру:

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

Шаг 8: Дальнейшие действия

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

Заключение

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

Источник: Указан

 

От переводчика: Данный материал перевел для Вас Виктор Доценко. В переводе могут  есть ошибки и неточности. О всех ошибках и неточностях сообщайте по почте или здесь в комментариях.

Кнопки демо и исходники я еще не реализовал в блоге, поэтому пока лишь ссылки. В будущем доделаю все в красивом виде.

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

ВИДЕО ТЕСТ (Ранняя версия)

Video not available


Новая система комментариев
comments powered by HyperComments