Выезжающий футер на CSS3

admin

8 лет назад

В этом коротком уроке мы будем создавать интересный выезжающий слайдер. Посмотрите демо и читайте дальше.

Идея

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

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

Иллюстрация ниже продемонстрирует всё наглядно:

Давайте посмотрим код!

HTML

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

<!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" />
 
        <!-- Главный файл CSS -->
        <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>Выезжающий футер на CSS3</h1>
 
        </div>
 
        <!-- Тут будет футер -->
 
    </body>
</html>

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

<footer>
 
    <ul>
        <li>
            <p class="home">Главная</p>
            <a class="logo" href="#">Название компании <i>&copy; 2013</i></a>
        </li>
        <li>
            <p class="services">Сервисы</p>
 
            <ul>
                <li><a href="#">3D моделирвоание</a></li>
                <li><a href="#">Веб разработка</a></li>
                <li><a href="#">Мобильная разработка</a></li>
                <li><a href="#">Веб &amp; Печатный Дизайн</a></li>
            </ul>
        </li>
        <li>
            <p class="reachus">Напишите нам</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">Клиентам</p>
 
            <ul>
                <li><a href="#">Войти</a></li>
                <li><a href="#">Поддержка</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
        </li>
    </ul>
 
</footer>

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

CSS

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

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

body{
    font:15px/1.3 'PT Sans', sans-serif;
    color: #5e5b64;
 
    /* Создаём контекст наложения */
 
    position:relative;
    z-index:0;
}

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

#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, чтобы элемент отображался выше всех остальных элементов на странице, у которых это свойство не прописано. В большинстве браузеров этого достаточно, чтобы достичь нужного поведения, но, к сожалению, мобильный 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, которое спрячет его за элемент #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;
}
 
/* 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;
}

Нужно быть осторожным при установке этих стилей, т.к. футер содержит вложенные списки, которые можно перепутать. Чтобы ограничить влияние стилей, я использую 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, а также задал плавный переход, который будет плавно менять прозрачность. При наведении мышки элементы становятся полностью непрозрачными.

И, наконец, раскрашиваем элементы, используя градиенты:

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-запрос или два, чтобы всё выглядело красивее.
Источник