Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Шаблоны » Шаблоны » Разные страницы » Заглушка при помощи HTML5 и CSS3

Заглушка при помощи HTML5 и CSS3

Опубликовал: InfernO
Категория: Разные страницы
Дата:Среда, 23 Января 2013 в 14:45

1 голос

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

1. Структура страницы
Ниже вы видите основную HTML-разметку страницы:

Код

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Minimal Coming Soon Page</title>

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




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

<script src="js/jquery.countdown.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header>

</header>
<div id="main">
<div id="links">

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

</div>
<form action="" method="get">

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

</div>
<footer>

</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-код:

Код

Див "counter” будет пустым, потому что весь HTML-код будет генерироваться плагином jQuery. Вот HTML-код, который генерирует плагин:

Код

В зависимости от времени, которые мы ставим при инициализации счетчика, плагин будет показывать четыре колонки цифр («Дни», «часы», «минуты», «секунды») и анимировать таймер.
Теперь давайте добавим стили нашему счетчику:

Код

/* ---- 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”.

После подключения 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;
}

8. Футер
В футер мы добавим социальные иконки с прикрепленными к ним ссылками.
Вот разметка футера:

Код

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

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

Код

А также добавим следующие стили:

Код

.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 и атрибуты, которые спасли нам много времени и сделали нашу страницы быстрой и легкой.

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Автор файла: 1stwebdesigner

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1726 | Скачали: 4 « Назад

Теги материала: Отдельные страницы, при, работ, заглушка/тех., html5, css3, страница, помощи

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Шаблоны » Шаблоны » Разные страницы » Заглушка при помощи HTML5 и CSS3

Заглушка при помощи HTML5 и CSS3

Комментарии пользователей