—»     —»   Создаем выезжающий подвал при помощи хитрого трюка с z-index
  Раздел: Руководства   Нет комментариев  

Создаем выезжающий подвал при помощи хитрого трюка с z-index



Создаем выезжающий подвал при помощи хитрого трюка с z-index

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

Суть

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

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

Следующая иллюстрация поможет вам лучше понять, о чем идет речь:

Создаем выезжающий подвал при помощи хитрого трюка с z-index

Теперь давайте перейдем к коду!

HTML-код

Ниже вы можете видеть разметку страницы. Это обычный HTML5-документ, в разделе head у которого мы указываем шрифт из Google Webfonts, и HTML5 shim для старых версий браузеров 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="http://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>

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

Создаем выезжающий подвал при помощи хитрого трюка с z-index

CSS-код

Как вы уже наверное догадались, здесь начинается все самое интересное. В самом начале руководства мы говорили о том, что будем работать с отрицательными параметрами z-index, чтобы подвал наш был зафиксирован внизу экрана. Есть очень полезная статья, в которой объясняется процесс работы с z-index, и мы настоятельно рекомендуем вам ознакомиться с ней перед тем, как продолжить данный урок. Не беспокойтесь, мы никуда не денемся!

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

assets/css/styles.css

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

/* Create a page-wide stacking context
(so that negative margins work as you expect) */

position:relative;
z-index:0;
}

Теперь все другие элементы на странице с z-index будут размещены в соответствии с телом документа. Далее нам нужно применить 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);
}

Значение 1 у параметра z-index поместит элемент поверх всех других элементов на странице, у которых не указано значение параметра 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-элемент, который имеет фиксированное позиционирование по отношению к окну браузера:

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, но есть еще некоторые стили, о которым мы хотели бы вам рассказать:

/* The four columns of links */

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

footer ul{
list-style: none;
}

/* The links */

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.

/* The company logo */

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

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

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

Еще один трюк, который мы здесь использовали, заключается в том, что мы установили уровень непрозрачности (opacity) элементов на 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;
}

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

Конец!

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

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

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

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

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


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


















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