—»     —»   Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5
  Раздел: Руководства   Нет комментариев  

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5



В данном руководстве мы хотим рассказать вам о процессе создания страницы «Coming Soon» при помощи CSS3 и HTML5, используя милималистичный стиль и светлые цвета. Для этого мы воспользуемся минималистической страницей «Coming Soon», разработанной Stelian в Photoshop несколько дней назад. Если вы не видели того руководства, то обязательно ознакомьтесь с ним здесь:

Разработка минималистической страницы «Coming Soon» в Photoshop.

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

Результат

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

Посмотреть демо | Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.


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

Для реализации таймера обратного отсчета мы воспользуемся jQuery и плагином jQuery countdown с tutorialzine.com. Конечно же, мы немного отредактируем его для того, чтобы он соответствовал нашему дизайну.

В данном руководстве мы также будем использовать некоторые новые HTML5-теги (и сделаем так, чтобы они работали в Internet Explorer 7 и 8), а также применим некоторые интересные атрибуты типа placeholder и required для формы подписки. Атрибут placeholder позволит нам отобразить текст внутри поля ввода адреса электронной почты (в момент когда оно пустует), а атрибут required даст нам возможность определить, будет ли поле ввода электронной почты обязательным для заполнения (чтобы пользователь не смог подтвердить форму без введенного почтового адреса). Мы также позаботимся об откате на jQuery для этих двух атрибутов, чтобы они работали в старых версиях браузеров или в тех браузерах, где отсутствует соответствующая поддержка.

Итак, довольно разговоров, давайте приступать к делу.

1. Структура файлов

Давайте создадим новую папку и назовем ее «coming-soon-page». Внутри этой папки у нас будут следующие файлы и подпапки:

- index.html – основной HTML-файл;

- css – папка для таблиц стилей,
--- style.css – основной файл таблиц стилей,
--- reset.css – сброс параметров css (http://meyerweb.com/eric/tools/css/reset/),
--- ie.css – файл таблиц стилей для Internet Explorer 7 и 8;

- js – папка для javascript-файлов,
--- jquery.countdown.js – jQuery-плагин для таймера обратного отсчета,
--- script.js – наш пользовательский javascript-файл для инициализации таймера, для других анимаций и для отката HTML5-атрибутов placeholder и required, которые не поддерживаются в старых версиях браузеров,
--- modernizr.custom.js – javascript-библиотека для определения наличия поддержки атрибутов placeholder и required;

- images – папка с изображениями;
- fonts – папка для шрифтов, которая будет содержать шрифт, используемый в таймере.

2. Структура страницы

Ниже мы предлагаем вам основную HTML-структуру документа index.html:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Minimal Coming Soon Page</title>

<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="fonts/stylesheet.css">
<link rel="stylesheet" href="css/style.css">

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->

<!-- IE fix for HTML5 tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- jQuery and Modernizr-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>

<!-- Countdown timer and other animations -->
<script src="js/jquery.countdown.js"></script>
<script src="js/script.js"></script>

</head>

<body>

<header>
<!-- The headline and description of our page -->
</header>

<div id="main">
<div id="links">
<!-- The main links, support, download, etc. -->
</div>

<div id="counter">
<!-- The countdown timer -->
</div>

<form action="" method="get">
<!-- The subscription form -->
</form>

<div class="social-media-arrow">
<!-- The social media arrow, on the right of the page -->
</div>

<footer>
<!-- The page's footer that will contain the social icons -->
</footer>
</div>

</body>

</html>

Как видно, HTML-код довольно прост и понятен. В разделе head мы импортируем файлы таблиц стилей и javascript.

Вы можете заметить условные комментарии там, где мы нам нужно использовать файл ie.css для Internet Explorer 7 и 8. В этом файле мы добавили несколько строк для браузеров IE 7-8 (это можно видеть снизу). Мы так импортировали javascript-файл html5.js для того, чтобы IE 7 и 8 понимали новые тэги HTML5 – header и footer.

Тело нашей страницы также очень простое. Оно содержит шапку header, где мы поместим заголовок и описание страницы, а также div «main», где будут помещены ссылки, таймер обратного отсчета и форма подписки, а также подвал (footer).

Давайте стилизуем body-раздел нашей страницы. Мы воспользуемся шрифтом Arial (за исключением таймера), а также паттерном повторяющегося фона (который вы можете видеть среди исходных файлов):

body {
background: url(../images/body-pattern.jpg) top left repeat;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 40px;
}

3. Header (шапка сайта)

Как говорилось выше, шапка нашей страницы будет содержать заголовок и описание. Давайте посмотрим на HTML-код:

<header>
<h1>We are working our butts off to finish this website</h1>
<p>Our developer, Michael, is doing his best to finish this website before the counter, but we can’t help him.</p>
</header>

И стили:

/* ---- Header ---- */

header {
width: 720px;
margin: 80px auto 0 auto;
}

header h1 {
font-size: 30px;
font-weight: bold;
color: #272727;
text-shadow: 0 1px 0 #fff;
}

header p {
margin: 20px 0 0 3px;
font-size: 14px;
color: #272727;
}

Теперь наша страница выглядит следующим образом:

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

4. Основной раздел

Основной раздел страницы будет содержаться в div’е main, как видно по HTML-коду, приведенному выше. Этот раздел будет содержать ссылки, таймер, форму подписки, подвал и ссылки на социальные сети.

Давайте рассмотрим стилизацию основного раздела:

/* ---- Main Area ---- */

#main {
position: relative;
width: 700px;
margin: 50px auto 0 auto;
padding: 20px 0 0 25px;
background: url(../images/main-content-pattern.jpg) top left repeat;
}

Ширина его составляет 700 пикселей, он будет выровнен по центру и оформлен повторяющимся паттерном сетки в качестве фона. Он также будет позиционирован относительно. Нам это потребуется для того, чтобы задать абсолютное позиционирование стрелке социальной сети, как можно видеть ниже.

5. Ссылки

Ниже вы можете видеть HTML-код для ссылок:

<div id="links">
<div class="home"><a href="">http://1stwebdesigner.com/</a></div>
<div class="support"><a href="">http://support.1wd.com/</a></div>
<div class="browser"><a href="">Google Chrome OS. 10.X.23</a></div>
<div class="books"><a href="">http://1wd.co/e-books/</a></div>
<div class="download"><a href="">http://1wd.com/download/</a></div>
<div class="ups"><a href="">UPS Signed Worldwide</a></div>
</div>

И CSS:

/* ---- Links ---- */

#links {
width: 700px;
font-size: 12px;
font-weight: bold;
color: #aaa;
line-height: 18px;
overflow: hidden;
}

#links a {
position: relative;
color: #aaa;
text-decoration: none;
}

#links a:hover {
color: #aaa;
text-decoration: none;
}

.home, .support, .browser, .books, .download, .ups {
float: left;
width: 180px;
margin-left: 42px;
padding-left: 25px;
}

.home { background: url(../images/home.png) left center no-repeat; margin-left: 0; }
.support { background: url(../images/support.png) left center no-repeat; }
.browser { background: url(../images/browser.png) left center no-repeat; clear: right; }

.books, .download, .ups { margin-top: 10px; }

.books { background: url(../images/books.png) left center no-repeat; margin-left: 0; }
.download { background: url(../images/download.png) left center no-repeat; }
.ups { background: url(../images/ups.png) left center no-repeat; clear: right; }

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

Теперь наша страница должна выглядеть следующим образом:

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

6. Таймер обратного отсчета

Таймер обратного отсчета будем реализован при помощи плагина jQuery countdown. Наш таймер будет помещен в div «counter». Давайте посмотрим на HTML-код:

<div id="counter"></div>

Div «counter» будет пустым, так как весь HTML-код таймера будет сгенерирован плагином jQuery. Вот HTML-код, который будет создан плагином:

<div id="counter" class="countdownHolder">

<div class="countDays">
<span class="position">
<span class="digit static">0</span>
</span>
<span class="position">
<span class="digit static">0</span>
</span>
<span class="boxName">
<span class="Days">DAYS</span>
</span>
</div>
<span class="points">:</span>
<span class="countDiv countDiv0"></span>

<div class="countHours">
<span class="position">
<span class="digit static">0</span>
</span>
<span class="position">
<span class="digit static">0</span>
</span>
<span class="boxName">
<span class="Hours">HRS</span>
</span>
</div>
<span class="points">:</span>
<span class="countDiv countDiv1"></span>

<div class="countMinutes">
<span class="position">
<span class="digit static">0</span>
</span>
<span class="position">
<span class="digit static">0</span>
</span>
<span class="boxName">
<span class="Minutes">MNTS</span>
</span>
</div>
<span class="points">:</span>
<span class="countDiv countDiv2"></span>

<div class="countSeconds">
<span class="position">
<span class="digit static">0</span>
</span>
<span class="position">
<span class="digit static">0</span>
</span>
<span class="boxName">
<span class="Seconds">SECS</span>
</span>
</div>

</div>

В зависимости от времени, которое мы выставим при инициализации таймера, плагин будет отображать нужные цифры в 4-х блоках (“DAYS”, “HOURS”, “MINUTES”, “SECONDS”) и анимировать таймер.

Примечание: мы не будем в подробностях объяснять работу плагина. Создатель плагина Мартин Ангелов (Martin Angelov) довольно хорошо разъяснил всё до нас. Вы можете ознакомиться с материалом на tutorialzine.

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

/* ---- Counter ---- */

#counter {
width: 700px;
height: 145px;
margin: 55px auto 0 auto;
font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif;
font-size: 92px;
color: #272727;
text-shadow: 0 1px 0 #fff;
overflow: hidden;
}

.countDays, .countHours, .countMinutes, .countSeconds {
float: left;
width: 102px;
height: 138px;
padding-left: 36px;
background: #e7e7e7;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
box-shadow:
0 2px 3px 0 rgba(255,255,255,.2) inset,
0 2px 2px 0 rgba(0,0,0,.1);
}

.points {
float: left;
width: 40px;
margin: 0;
font-family: Georgia, serif;
font-size: 44px;
font-weight: bold;
text-align: center;
line-height: 138px;
text-shadow: none;
}

.position {
position: relative;
float: left;
width: 35px;
height: 92px;
margin: 8px 0 0 0;
}

.digit {
position: absolute;
top: 0;
left: 0;
}

.boxName {
float: left;
width: 80px;
margin: -5px 0 0 7px;
font-size: 36px;
color: #a6a6a6;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.Hours { margin-left: 5px; }
.Seconds { margin-left: 2px; }

Здесь мы использовали шрифт League Gothic, который вы можете найти среди исходных файлов. Если вы захотите использовать этот шрифт в своих дизайнах, то его можно скачать отсюда.

Как видно, для создания теней и градаций мы использовали только параметры CSS3. Эти новые параметры позволяют нам создавать сложные дизайны без необходимости нарезать и использовать изображения. Таким образом, наши страницы сохраняют низкий вес и экономят наше время.

Здесь были использованы следующие CSS3-параметры: “border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”. Вы можете понять их предназначение уже из названий.

Мы также использовали атрибут RGBA, который довольно интересен и удобен, так как позволяет нам применять прозрачную окраску ко многим CSS-параметрам.

Теперь мы инициализируем таймер обратного отсчета, добавив следующие строки кода в файл script.js (который находится в папке js):

$(document).ready(function(){

/* ---- Countdown timer ---- */

$('#counter').countdown({
timestamp : (new Date()).getTime() + 51*24*60*60*1000
});

});

Таймер сейчас отображает отсчет до надвигающегося события, которое должно произойти через 51 день. Теперь наша страница выглядит так:

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

7. Форма подписки

В форме подписки мы также используем два новых атрибута HTML5, как говорилось выше. Эти два новых атрибута placeholder и required. Вот HTML-код нашей формы:

<form action="" method="get">
<input type="text" class="email" placeholder="Input your e-mail address here..." required />
<input type="submit" class="submit" value="Let me Notified" />
</form>

У нас есть поле ввода текста для сбора адресов электронной почты пользователей и кнопка подтверждения. Текстовое поле будет обязательным для заполнения, так что пользователям придется в обязательном порядке заполнить его, прежде чем они смогут подтвердить форму. Пока поле не используется, оно будет отображать текст «Input your e-mail address here…».

Давайте стилизуем нашу форму:

/* ---- Subscription Form ---- */

form {
position: relative;
margin: 40px auto 0 auto;
}

.email {
width: 498px;
height: 35px;
padding: 0 15px;
background: #f1f1f1;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
border: 1px solid #cbcbcb;
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #b3b2b2;
font-style: italic;
}

.email:focus {
outline: 0;
border: 1px solid #c0c0c0;
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
}

.submit {
width: 140px;
height: 37px;
margin: 0 0 0 5px;
padding: 0;
background: #888;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
border: 1px solid #636363;
-moz-box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
-webkit-box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
box-shadow:
0 1px 2px 0 rgba(253,252,252,.35) inset,
0 -1px 2px 0 rgba(0,0,0,.15) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.35);
line-height: 13px;
cursor: pointer;
}

.submit:hover {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
}

.submit:active {
-moz-box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
-webkit-box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
box-shadow:
0 1px 2px 0 rgba(0,0,0,.15) inset,
0 3px 13px 3px rgba(0,0,0,.3) inset;
color: #ddd;
}

Мы использовали псевдо-классы CSS :hover, :focus и :active для изменения стиля поля ввода и кнопки подтверждения в момент, когда пользователь вписывает адрес своей электронной посты или наводит курсор мыши на кнопку, или нажимает её.

Мы также использовали те же CSS3-параметры, которые использовали для таймера обратного отсчета: “border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.

Теперь страница выглядит следующим образом:

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

И так выглядит форма, когда пользователь кликает по кнопке подтверждения, не заполнив текстовое поле:

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

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

Эти два новых HTML5-атрибута (placeholder и required) очень удобны, и могут сэкономить нам много времени, но они не поддерживаются старыми версиями браузеров вроде Internet Explorer 7 и 8.

Для них мы будем использовать javascript-библиотеку Modernizr, что позволит нам выяснять, поддерживает ли браузер эти два атрибута.

Еще одна проблема появляется тогда, когда мы используем браузер Safari. Safari не поддерживает атрибут required, но Modernizr возвращает значение «true» при проверке на наличие поддержки.

Так что, нам нужно проверять пользователя на предмет поддержки новых атрибутов его браузером, и на предмет того, использует ли он Safari. Если да, то нам нужно предоставить jQuery-откат для отображения текста placeholder и для определения того, заполнено ли текстовое поле.

После включения Modernizr (файла modernizr.custom.js) в головную секцию (head) нашей страницы, нам нужно добавить следующие строки кода в файл script.js:

/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */

if (!Modernizr.input.placeholder) {
$('.email').val('Input your e-mail address here...');
$('.email').focus(function() {
if($(this).val() == 'Input your e-mail address here...') {
$(this).val('');
}
});
}

// for detecting if the browser is Safari
var browser = navigator.userAgent.toLowerCase();

if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) {
$('form').submit(function() {
$('.popup').remove();
if(!$('.email').val() || $('.email').val() == 'Input your e-mail address here...') {
$('form').append('<p class="popup">Please fill out this field.</p>');
$('.email').focus();
return false;
}
});
$('.email').keydown(function() {
$('.popup').remove();
});
$('.email').blur(function() {
$('.popup').remove();
});
}

Вы можете заметить, что мы добавили в форму новый элемент «p»-араграфа, который содержит текст «Please fill out this field.» и задали ему класс «popup».

Давайте рассмотрим CSS-код для стилизации всплывающего окна, и сделаем так, чтобы оно появлялось под текстовым полем:

.popup {
position: absolute;
top: 45px;
left: 0;
width: 140px;
padding: 10px;
background: #e7e7e7;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #888;
}

Теперь, если мы откроем страницу через Safari и кликнем на кнопку подтверждения, не введя при этом текста в поле ввода, форма будет выглядеть следующим образом:

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

8. Подвал

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

Вот HTML-код:

<footer>
<ul>
<li><a class="digg" href=""></a></li>
<li><a class="twitter" href=""></a></li>
<li><a class="vimeo" href=""></a></li>
<li><a class="skype" href=""></a></li>
</ul>
</footer>

И CSS-код:

/* ---- Footer ---- */

footer {
width: 700px;
margin: 0 auto;
padding: 35px 0 25px 0;
overflow: hidden;
}

footer ul {
float: right;
width: 125px;
height: 22px;
}

footer ul li {
float: left;
}

footer a {
position: relative;
display: block;
margin-left: 10px;
}

.digg {
width: 10px;
height: 16px;
background: url(../images/digg.png) center center no-repeat;
}

.twitter {
width: 21px;
height: 16px;
background: url(../images/twitter.png) center center no-repeat;
}

.vimeo {
width: 16px;
height: 16px;
background: url(../images/vimeo.png) center center no-repeat;
}

.skype {
width: 16px;
height: 16px;
background: url(../images/skype.png) center center no-repeat;
}

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

<div class="social-media-arrow"></div>

который мы стилизируем следующим образом:

.social-media-arrow {
position: absolute;
top: 125px;
right: -95px;
width: 108px;
height: 256px;
background: url(../images/social-media-arrow.png) top left no-repeat;
}

И страница будет выглядеть вот так:

Разработка страницы «Coming Soon» в стиле минимализма при помощи CSS3 и HTML5

9. Добавляем jQuery-анимацию

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

/* ---- Animations ---- */

$('#links a').hover(
function(){ $(this).animate({ left: 3 }, 'fast'); },
function(){ $(this).animate({ left: 0 }, 'fast'); }
);

$('footer a').hover(
function(){ $(this).animate({ top: 3 }, 'fast'); },
function(){ $(this).animate({ top: 0 }, 'fast'); }
);

10. Совместимость с IE 7-8

Так как Internet Explorer 7 и 8 не поддерживают новые CSS3-параметры, градации и тени нельзя будет видеть в этих браузерах, но страница будет полностью функциональна. Также, благодаря откату на jQuery, который мы продумали, форма подписки также будет работать.

В конце данного руководства нам нужно просто добавить следующие 3 строки кода в файл ie.css:

.email {
line-height: 35px;
}

Это нужно для того, чтобы в браузерах IE 7-8 текст в поле ввода не выравнивался по верхнему краю.

Завершение

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

Что вы думаете по поводу сегодняшнего руководства? Узнали ли вы что-нибудь новое? Какие мысли у вас по поводу этих новых параметров? Будете ли вы использовать их? Или же подождете, пока поддержка появится во всех браузерах?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, CSS, реконструкция, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 5461   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930