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

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

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

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

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

 

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

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

XHTML
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
<!doctype html>
<head>
    <!-- Шапка -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>WoZ is coming soon.</title>
    <!-- Отображение на мобильных -->
    <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>
    <!-- Тело HTML -->
<body>
    <!-- Теперь контентная часть -->
    <div id="container">
        <h1>ПРОЕКТ X</h1>
        <p>
       Скоро запуск нашего замечательного сайта <a href="http://worldofzombie.ru/" title="World of Zombie" target="_blank">World of Zombie</a>
        </p>
<p>Сайт создан при поддержке <a href="http://blog.isandbox.ru" title="Блог Виктора Доценко" target="_blank"> Isandbox.ru</a>
        <div id="subscribe">
        <input type="email" placeholder="Введите email адрес">
        <input type="submit" value="SEND">
        </div>
    </div>
    <!-- Заканчиваем контентную часть -->
</body>
</html>

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

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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, используя селекторы атрибутов для поля электронной почты и представим элементы отдельно.

CSS
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
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: Стилизация текста

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
}

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

CSS
1
2
3
4
p a {
    color: #fff;
    border-bottom: 2px solid #2da1ec;
}

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

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

CSS
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), и установив размер шрифта:

CSS
1
2
3
4
5
6
7
8
9
10
::-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;
}

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

CSS
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
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
1
2
3
4
5
6
7
8
p a {
color: #fff;
border-bottom: 2px solid #2da1ec;
}
p a:hover {
color: #2da1ec;
border-bottom: 2px solid #fff;
}

 

CSS
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
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 );
}

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

CSS
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;
}

и

CSS
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: CSS3 анимация

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

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

CSS
1
@import url(animate.css);

CSS

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

CSS
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;
}

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

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

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

Заключение

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

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

 

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

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

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

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

[youtube y0jCSLFPLpU]

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