Изящный выскальзывающий футер сайта

Изящный выскальзывающий футер сайта

От автора: в этом коротком учебнике мы собираемся с помощью небольшого количества CSS создать интересный выскальзывающий нижний колонтитул. Скачайте zip-файл, нажав выше кнопку download, откройте его в любимом редакторе кода и начните читать!

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

Идея

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

Содержимое всей страницы, кроме нижнего колонтитула, должно находиться в едином упаковывающем элементе (в данном случае div id=»main»). У этого элемента должно быть значение z-index, равное 1;

Нижний колонтитул нужно установить на отрицательное значение z-index. Так будет гарантирован фоновый цвет и освободится место для фиксированной части колонтитула (ссылок и цветных заголовков);

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Должен присутствовать элемент, установленный в фиксированную позицию по отношению к низу окна просмотра, и его z-index должен быть ниже элемента #main, но выше нижнего колонтитула.

Рассмотрев следующую иллюстрацию, вы лучше поймете эту идею:

Z-index элемента div id=”main” равен 1 и накрывает нижний колонтитул.

У элемента footer z-index равен -2, расположен он относительно и создает свободное место для ul.

ul фиксирован по низу окна с помощью position:fixed и имеет z-index, равный -1. Он показывается ниже div’а #main, но выше footer.

А теперь рассмотрим код!

HTML

Ниже показана разметка страницы. В основном она – обычный документ HTML5, в head которого я включаю шрифт из Google Webfonts и HTML5 shiv для старых браузеров IE.

index.html

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8"/>
 <title>Tutorial: A CSS3 slide-out footer</title>

 <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700" rel="stylesheet" />

 <!-- The main CSS file -->
 <link href="assets/css/style.css" rel="stylesheet" />

 <!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 </head>

 <body>

 <div id="main">

 <h1>A CSS3 slide-out footer.</h1>

 </div>

 <!-- The footer will go here -->

 </body>
</html>

Элемент #main упаковывает содержимое страницы. В следующем разделе вы увидите, что мы назначим ему положительное значение z-index для того, чтобы он визуализировался над нижним колонтитулом. А вот разметка самого колонтитула:

<footer>

 <ul>
 <li>
 <p class="home">Home</p>
 <a class="logo" href="#">Company Name <i>&copy; 2013</i></a>
 </li>
 <li>
 <p class="services">Services</p>

 <ul>
 <li><a href="#">3D modeling</a></li>
 <li><a href="#">Web development</a></li>
 <li><a href="#">Mobile development</a></li>
 <li><a href="#">Web &amp; Print Design</a></li>
 </ul>
 </li>
 <li>
 <p class="reachus">Reach us</p>

 <ul>
 <li><a href="#">Email</a></li>
 <li><a href="#">Twitter</a></li>
 <li><a href="#">Facebook</a></li>
 <li>555-123456789</li>
 </ul>
 </li>
 <li>
 <p class="clients">Clients</p>

 <ul>
 <li><a href="#">Login Area</a></li>
 <li><a href="#">Support Center</a></li>
 <li><a href="#">FAQ</a></li>
 </ul>
 </li>
 </ul>

</footer>

Внутри тэга нижнего колонтитула у нас неупорядоченный список, содержащий четыре группы ссылок (определенных с помощью элементов li). У каждой группы есть абзац, который трансформируется в цветной заголовок группы, и еще один ul, содержащий ссылки. Самый дальний от центра ul будет установлен на position:fixed, что сделает его статичным по отношению к низу окна браузера.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

CSS

Как вы уже догадались, здесь как раз все становится интереснее. В начале учебника я упоминал, что мы будем работать с отрицательными z-index’ами, чтобы колонтитул был зафиксирован по низу экрана. Есть очень хорошая статья, подробно объясняющая z-index’ы, которую я весьма рекомендую прочесть перед тем, как продолжить дальше. Не беспокойтесь, я подожду.
Первое, что нужно сделать – это создать контекст, располагающийся по вертикали, на элементе body (подойдет любой элемент, содержащий как нижний колонтитул, так и div #main). Если этого не сделать, по моему опыту, отрицательные z-index’ы не будут работать в мобильном Safari и старых IE. Для создания складирующегося один на другой контекста нам нужно только задать ему z-index и позиционирование:

assets/css/styles.css

body{
 font:15px/1.3 'PT Sans', sans-serif;
 color: #5e5b64;

 /* Создайте складывающийся друг на друга контекст шириной во всю страницу 
 (чтобы отрицательные поля работали так, как вы от них ожидаете) */

 position:relative;
 z-index:0;
}

Теперь все прочие элементы страницы со значением z-index станут складываться в штабели согласно body. Далее нужно определить z-index для элемента #main так, чтобы тот закрывал нижний колонтитул (иначе тот всегда будет видимым, фиксированным к низу окна).

#main{
 position:relative;
 z-index:1;

 background-color: #fff;

 background-image:-webkit-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
 background-image:-moz-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
 background-image:radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);

 padding: 120px 0 600px;
 box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

Значения z-index’а в 1 достаточно, чтобы выдвинуть элемент над всеми остальными на странице, у которых нет определенных наборов z-index’ов. В большинстве браузеров этого достаточно, чтобы добиться нужного нам поведения, но, к сожалению, у мобильного Safari имеется проблема с повторным графическим отображением, что неизбежно влечет за собой установку отрицательных z-index’ов к нижнему колонтитулу. Еще нам нужно установить на элементе #main фон, иначе мы будем видеть нижний колонтитул сквозь него.

А вот и нижний колонтитул:

footer{
 height: 245px;
 color:#ccc;
 font-size:12px;

 position:relative;
 z-index:-2;

 background-color:#31353a;

 background-image:-webkit-linear-gradient(top, #31353a, #2f3337);
 background-image:-moz-linear-gradient(top, #31353a, #2f3337);
 background-image:linear-gradient(top, #31353a, #2f3337);
}

Я установил значение z-index на -2. Что сдвигает его за div #main. Обратите внимание, что этому элементу нужно назначить высоту, потому что элемент UL внутри него имеет фиксированное позиционирование и не станет увеличивать родительский элемент до своего размера.

Следующий – элемент UL внутри него, фиксированный по окну браузера:

/* Установите ширину самого крайнего UL’а, отцентрируйте его и зафиксируйте относительно окна */

footer > ul{
 width:960px;
 position:fixed;
 left:50%;
 bottom:0;
 margin-left:-480px;
 padding-bottom: 60px;
 z-index:-1;
}

Он установлен на z-index в -1, который заставляет его показываться ниже элемента #main, но выше нижнего колонтитула, что нам как раз и требуется. Прием с z-index’ом на этом заканчивается, но заслуживают упоминания еще несколько стилей:

/* Четыре колонки ссылок */

footer > ul > li{
 width:25%;
 float:left;
}

footer ul{
 list-style: none;
}

/* Ссылки */

footer > ul > li ul li{
 margin-left:43px;
 text-transform: uppercase;
 font-weight:bold;
 line-height:1.8;
}

footer > ul > li ul li a{
 text-decoration: none !important;
 color:#7d8691 !important;
}

footer > ul > li ul li a:hover{
 color:#ddd !important;
}

При назначении этих стилей нужно быть очень осторожным, потому что в нижнем колонтитуле содержатся вложенные UL’ы, которые могут перепутаться. Для ограничения эффекта этих стилей я применяю дочерний селектор CSS >.

Далее идет логотип компании. Изображение показывается из спрайта как элемент :before.

/* Логотип компании */

footer a.logo{
 color: #e4e4e4 !important;
 text-decoration: none !important;
 font-size: 14px;
 font-weight: bold;
 position: relative;
 text-transform: uppercase;
 margin-left: 16px;
 display: inline-block;
 margin-top: 7px;
}

footer a.logo i{
 font-style: normal;
 position: absolute;
 width: 60px;
 display: block;
 left: 48px;
 top: 18px;
 font-size: 12px;
 color: #999;
}

footer a.logo:before{
 content: '';
 display: inline-block;
 background: url('../img/sprite.png') no-repeat -19px -70px;
 width: 48px;
 height: 37px;
 vertical-align: text-top;
}

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

footer p{
 width: 90%;
 margin-right: 10%;
 padding: 9px 0;
 line-height: 18px;
 background-color: #058cc7;
 font-weight: bold;
 font-size: 14px;
 color:#fff;
 text-transform: uppercase;
 text-shadow: 0 1px rgba(0,0,0,0.1);
 box-shadow: 0 0 3px rgba(0,0,0,0.3);
 margin-bottom: 20px;
 opacity:0.9;
 cursor:default;

 -webkit-transition: opacity 0.4s;
 -moz-transition: opacity 0.4s;
 transition: opacity 0.4s;
}

footer > ul > li:hover p{
 opacity:1;
}

footer p:before{
 content: '';
 display: inline-block;
 background: url('../img/sprite.png') no-repeat;
 width: 16px;
 height: 18px;
 margin: 0 12px 0 15px;
 vertical-align: text-bottom;
}

Еще один примененный мною здесь прием заключается в том, что я установил непрозрачность элементов на 0.9 и определил переход, который станет плавно анимировать непрозрачность при ее изменении. При проведении мышью непрозрачность установлена на 1, что запускает анимацию.

И последнее – вот разные цветовые темы, созданные с помощью некоторых градиентов CSS:

footer p.home{
 background-color: #0096d6;

 background-image:-webkit-linear-gradient(top, #0096d6, #008ac6);
 background-image:-moz-linear-gradient(top, #0096d6, #008ac6);
 background-image:linear-gradient(top, #0096d6, #008ac6);
}

footer p.home:before{
 background-position: 0 -110px;
}

footer p.services{
 background-color: #00b274;

 background-image:-webkit-linear-gradient(top, #00b274, #00a46b);
 background-image:-moz-linear-gradient(top, #00b274, #00a46b);
 background-image:linear-gradient(top, #00b274, #00a46b);
}

footer p.services:before{
 background-position: 0 -129px;
}

footer p.reachus{
 background-color: #d75ba2;

 background-image:-webkit-linear-gradient(top, #d75ba2, #c75496);
 background-image:-moz-linear-gradient(top, #d75ba2, #c75496);
 background-image:linear-gradient(top, #d75ba2, #c75496);
}

footer p.reachus:before{
 background-position: 0 -89px;
}

footer p.clients{
 background-color: #e9ac40;

 background-image:-webkit-linear-gradient(top, #e9ac40, #d89f3b);
 background-image:-moz-linear-gradient(top, #e9ac40, #d89f3b);
 background-image:linear-gradient(top, #e9ac40, #d89f3b);
}

footer p.clients:before{
 background-position: 0 -69px;
}

Так заголовки выглядят красиво и красочно без применения изображений.

Мы закончили!

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

Автор: Martin Angelov

Источник: http://tutorialzine.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree