Делаем страницу-заглушку при помощи HTML5 и CSS3
5 сентября 2012 | Опубликовано в css | 11 Комментариев »
В этом уроке мы собираемся создать страницу-заглушку при помощи HTML5 и CSS3 в минималистском стиле и светлых тонах. В этом уроке мы будем также использовать некоторые новые теги HTML5 и некоторые интересные атрибуты, такие как «placeholder» и «required» для формы подписки. Атрибут «placeholder» позволяет нам показывать текст в поле ввода электронной почте, когда он пуст, в то время как атрибут «required» позволяет сделать, так чтобы пользователь не мог отправить форму без ввода данных. Мы также добавим JQuery-код этих двух атрибутов для старых браузеров и браузеров, которые пока их не поддерживают. Для таймера обратного отсчета мы будем использовать JQuery и jQuery countdown plugin от tutorialzine.com. Конечно, мы немного его настроим, чтобы соответствовать нашему дизайну.
Окончательный результат:
Как видите, страница содержит много градиентов и теней. Мы будем делать её, используя только CSS3. Как вы, наверняка знаете, CSS3 предоставляет нам много новых свойств, которые позволяют создавать интересные эффекты без необходимости использования изображений.
Так, хватит болтать и начнем.
1. Структура файла
Создайте папку и назовите “coming-soon-page”. Внутри этой папки будут следующие файлы и папки:
- index.html –основной HTML-документ;
- css— папка со стилями,
- style.css – основные стили,
- reset.css – файл для сброса стилей (meyerweb),
- ie.css – файл для Internet Explorer 7 и 8;
- js— папка с файлами JavaScript,
- jquery.countdown.js – плагин jQuery для обратного отсчета времени,
- script.js – наш JavaScript-файл для установки таймера, для анимации и некоторых атрибутов html5, которые не поддерживаются
- modernizr.custom.js – файл с шаблоном modernizr;
- images – папка для изображений;
- fonts – папка со шрифтами
2. Структура страницы
Ниже вы видите основную 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». В этом файле мы добавим несколько строк для IE 7-8. Мы также прикрепили файл «html5.js» для того, чтобы заставить IE 7 и 8 понимать новые теги HTML5, “header” и “footer”.
Тело нашей страницы содержит хедер, в который мы поместим заголовок и описание страницы, и див «main», в который мы поместим ссылки, таймер обратного отсчета, форму подписки и футер.
Вот стили для тела страницы. Мы будем использовать в основном шрифт Arial (за исключением таймера) и повторяющийся паттерн для фона:
body { background: url(../images/body-pattern.jpg) top left repeat; font-family: Arial, Helvetica, sans-serif; padding-bottom: 40px; }
3. Хедер
Как было сказано выше, наш хедер будет содержать заголовок и описание. Вот разметка 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; }
Теперь наша страница выглядит следующим образом:
4. Основная область
Основная область будет содержать ссылки, таймер, форму подписки, футер и социальные иконки.
Вот ее стили:
/* ---- 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 пикселей, а у каждой ссылки есть своя собственная иконка. Мы немного поиграли с отступами, чтобы сделать так, чтобы они соответствовали дизайну. А еще мы используем относительное позиционирование для ссылкок, чтобы позже можно было добавить простую анимацию к ним при помощи JQuery.
Страница должна выглядеть следующим образом:
6. Таймер обратного отсчета
Для создания таймера обратного отсчета мы будем использовать jQuery countdown plugin от tutorialzine.com. Наш таймер включает в себя див “counter”. Вот его HTML-код:
<div id="counter"></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>
В зависимости от времени, которые мы ставим при инициализации счетчика, плагин будет показывать четыре колонки цифр («Дни», «часы», «минуты», «секунды») и анимировать таймер.
Примечание: Мы не будем объяснять плагин более подробно. Мартин Ангелов (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 день начиная с настоящего момета). Он выглядит так:
7. Форма подписки
Для формы подписки мы будем использовать 2 новых 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>
У нас есть текстовое поле и кнопка для отправки формы. В текстовом поле пользователь обязательно должен ввести адрес электронной почты перед отправкой формы. Если оно будет незаполненым, появится текст „Введите ваш адрес электронной почты здесь ...“. \
Давайте немного украсим нашу форму:
/* ---- 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; }
Как видите, мы использовали псевдо-классы :hover, :focus и :active и те же CSS3-свойства для нашего счетчика, “border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.
Так будет выглядеть наша форма, если поле будет незаполнено:
Два новых атрибутов HTML5 (placeholder” и “required”) очень полезны и могут сэкономить много времени, но они не поддерживаются старыми браузерами, такими как Internet Explorer 7 и 8. Мы решим эту проблему при помощи библиотеки Modernizr.
Safari также не поддерживает атрибут „required“ , но Modernizr возвращает „true“ при проверке
.
После подключения 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(); }); }
Вот 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 и нажали кнопку „submit“ и не ввели текст, наша форма будет выглядеть так:
8. Футер
В футер мы добавим социальные иконки с прикрепленными к ним ссылками.
Вот разметка футера:
<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 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; }
Наша страница должна выглядеть так:
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. Добавляем стили для Internet Explorer 7 – 8
Добавьте следующие стили в файл “ie.css” :
.email { line-height: 35px; }
Мы добавили эти стили потому, что в IE 7 и 8 текстовое поле не отражает текст центрированым по вертикали.
Заключение
Наконец мы создали страницу-»заглушку" и готовы использовать ее на нашем сайте. Мы использовали некоторые новые свойства CSS3 и несколько новых тегов HTML5 и атрибуты, которые спасли нам много времени и сделали нашу страницы быстрой и легкой.
Итак, что вы думаете по поводу этого урока? Узнали ли вы что-то новое? Кроме того, что вы думаете об этих новых свойств? Будете ли вы использовать их? Или вы хотите, чтобы ждать, пока они лучше поддерживаются различными браузерами?
Примечание: Исходники вы можете скачать на сайте автора
Автор: 1stwebdesigner
Перевод: Дежурка
549
5 сентября 2012 в 13:07
Спасибо, пригодится)
5 сентября 2012 в 15:55
Америку не открыли) но всё равно интересно
7 сентября 2012 в 17:46
В заголовке ничего про использование JavaScript не сказано. А я то было обрадовался...
8 сентября 2012 в 13:40
Спасибо за урок. Действительно, в наше время уже давно стоит применять эти удобные функции HTML5 и CSS3.
Жаль что еще нужен бубен для ИЕ и сафари.
24 сентября 2012 в 11:47
Спасибо, полезно! Только как сделать, что бы при обновлении страницы счетчик не обнулялся?
10 ноября 2012 в 18:45
помогите пожалуйста!
как сделать что бы таймер можно было настраивать на определённую дату?
очень нужна ваша помощь
спасибо
18 ноября 2012 в 17:23
Бестолковая весчь, он даже к дате не привязан...Обнавляешь страницу-он опять заново отсчёт начинает
22 января 2013 в 0:10
Всё просто. В JS-файле «script.js» меняете 8-ю строку с
timestamp : (new Date ()).getTime () + 51*24*60*60*1000
на:
timestamp : (new Date (year, month, date[, hours, minutes, seconds]))
где year в формате XXXX,
month от 0 до 11 (янв ... декабрь)
date от 1 до 31
и не обязательные параметры: hours — 0..23, minutes — 0..59, seconds — 0..59
июня 14, 2013 at 10:46 дп
Не работает код, так как при установке даты открытия на месяц вперед, циферки выдают 60 дней, хотя должны 29
20 февраля 2013 в 17:22
Что-то я пропустил или не понял. А как настроить саму форму отправки email, куда он отправляется или где я могу посмотреть введенные пользователями emal-ы ? Спасибо.