В сегодняшнем руководстве мы хотим рассказать вам о процессе разработки интересного эффекта с выезжающим подвалом, который реализуется при помощи кода CSS.
Суть
Эффект предназначен для того, чтобы впечатлить посетителей страницы выезжающим подвалом. Для этого нам нужно, чтобы:* Весь контент страницы кроме самого подвала, должен быть помещен в одну оболочку (в нашем случае в div id=”main”). Этому элементу будет задан параметр z-index со значением 1;* Подвалу мы задали отрицательное значение параметра z-index. Это предоставит нам цвет фона, и создаст пространство для фиксированной части подвала (для ссылок и цветных заголовков);* У нас был элемент с выставленным фиксированным позиционированием по отношению к нижней части окна, и имел параметр z-index, значение которого было бы ниже, чем у элемента #main, но выше, чем у подвала.Следующая иллюстрация поможет вам лучше понять, о чем идет речь: 
Теперь давайте перейдем к коду!
HTML-код
Ниже вы можете видеть разметку страницы. Это обычный HTML5-документ, в разделе head у которого мы указываем шрифт из Google Webfonts, и HTML5 shim для старых версий браузеров IE.
Index.html
Tutorial: A CSS3 slide-out footer
A CSS3 slide-out footer.
Элемент #main оборачивает контент страницы. Как вы увидите в следующем разделе, мы задаем ему положительное значение z-index, и таким образом он отображается поверх подвала. А теперь давайте рассмотрим разметку для самого подвала:
-
Home -
Services -
Reach us -
Clients
Внутрь тега footer мы помещаем ненумерованный список, в котором содержатся 4 группы ссылок (определенных при помощи элементов li). У каждой группы есть параграф, который преобразуется в цветной заголовок для группы, и еще один ul, который содержит ссылки. У самого последнего ul будет установлен параметр position:fixed, который сделает его фиксированным по отношению к нижней части окна браузера. 
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, чтобы сайт также адаптировался и под габариты устройства.
Исходники в архиве.