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

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

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

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

Идея

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

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

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

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

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 с нуля до результата!

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