В этом коротком уроке мы создадим интересный эффект выезда футера на чистом CSS. Скачайте себе ZIP-архив демонстрации, откройте ее код в вашем любимом редакторе и читайте дальше!
Идея
Эффект, который мы создадим, заключается в том, чтобы создать впечатление, что страница поднимается над зафиксированным на месте футером. Для достижения этой цели:
- Все содержимое страницы, кроме футера, должно находиться в одном родительском элементе (
<div id="main">
в нашем случае). Этому элементу будет присвоено значениеz-index: 1
; - Содержимое футера должно иметь отрицательное значение
z-index
; - А сам футер должен так же иметь отрицательное значение
z-index
, но меньше чем его содержимое, и фиксированно спозиционирован к нижней границе окна браузера;
Вы можете просмотреть наглядное представление идеи нашего эффекта на изображении:

Теперь мы можем приступить к написанию кода!
HTML
Ниже вы можете увидеть разметку нашей страницы. Это простой HTML5-документ, в области <head> которого подключается шрифт с Google Webfonts, HTML5 shim для старых версий Internet Explorer:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Эффектный "выезд" футера</title> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700&subset=cyrillic,latin' rel='stylesheet' type='text/css'> <!-- The main CSS file --> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="main"> <h1><a href="/">Эффектный "выезд" футера</a></h1> </div> </body> </html>
Элемент #main
окутывает весь контент страницы. Теперь перейдем к коду разметки футера, который идет сразу после #main
:
<footer> <ul class="row"> <li class="col-25"> <p class="home"><i class="icon-home"></i> Home</p> <a class="logo" href="#"><i class="icon-group"></i> Company Name <cite>© 2013</cite></a> </li> <li class="col-25"> <p class="services"><i class="icon-cogs"></i> 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 & Print Design</a></li> </ul> </li> <li class="col-25"> <p class="reachus"><i class="icon-question-sign"></i> Contact 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 class="col-25"> <p class="clients"><i class="icon-user"></i> 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
, находится маркированный список, который содержит четыре группы ссылок. В нутри каждой группы есть абзац, который превращается в красочный заголовок, и другой <ul>
, который содержит ссылки. Для внешнего <ul>
будет установлен postion: fixed
, что сделает его статичным относительно нижней части окна браузера.

CSS
Как вы уже могли догадаться, здесь начинается самое интересное. В начале урока я упомянул, что мы будем работать со свойством z-index
, используя отрицательные его значения, чтобы расположить футер к низу окна. Если вы еще не имеете представления о z-index, советую прочитать статью о данном свойстве, прежде чем мы двинемся дальше. Не волнуйтесь, я подожду.
Для начала определим некоторые стили для body
, важным моментом здесь является присваивание ему относительной позиции, чтобы нам было относительно чего позиционировать футер и содержимое страницы.
body{ font-family: 'PT Sans Narrow'; color: #5e5b64; position:relative; z-index:0; }
Элементу #main
добавим относительное позиционирование, z-index (для возвышения над футером), цвет фона, и тень от объекта:
#main{ position:relative; z-index:1; background-color: #e2e2e2; padding: 120px 0 600px; box-shadow: 0 3px 3px rgba(0,0,0,0.2); }
Еще раз повторю, что эффект заключается в том, что футер выскальзывает из-под слоя с содержимым страницы. Теперь переходим к стилям для футера.
footer{ height: 195px; color:#ccc; font-size:12px; position:relative; z-index:-2; background-color:#31353a; }
Мы задали высоту для footer, т.к. содержащийся в нем неупорядоченный список имеет фиксированную позицию, иначе футер не будет видно. Теперь переходим к стилизации содержимого футера:
footer > ul{ position:fixed; left:0; bottom:0; z-index:-1; padding:0 4em; } footer ul{ list-style: none; } /* The links */ footer > ul > li ul li{ 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; } /* Common styles for the four color bars */ footer p{ padding: 9px 10px; background-color: #058cc7; font-weight: bold; font-size: 14px; color:#fff; text-transform: uppercase; margin-bottom: 20px; } /* The different colors */ footer p.home{background-color: #0096d6} footer p.services{background-color: #00b274} footer p.reachus{background-color: #d75ba2} footer p.clients{background-color: #e9ac40}
Здесь мы фиксируем элемент ul
, в котором находится содержание футера, к нижнему краю окна, задаем стиль ссылкам и заголовкам.
Готово!
Я надеюсь, что вам понравилась эта простая техника. Она работает даже на мобильных устройствах, хотя вы, вероятно, захотите настроить данный эффект под мобильные устройства через медиа-запросы.
Источник: TutorialZine.