Витончений выскальзывающий футер сайту

16

Від автора: в цьому короткому підручнику ми збираємося за допомогою невеликої кількості 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

Tutorial: A CSS3 slide-out footer

A CSS3 slide-out footer.

Елемент #main упаковує вміст сторінки. У наступному розділі ви побачите, що ми призначимо йому позитивне значення z-index для того, щоб він візуалізувався над нижнім колонтитулом. А ось розмітка самого колонтитула:

  • Home

    Company Name © 2013

  • Services

    • 3D modeling
    • Web development
    • Mobile development
    • Web & Print Design
  • Reach us

    • Email
    • Twitter
    • Facebook
    • 555-123456789
  • Clients

    • Login Area
    • Support Center
    • FAQ

Всередині тега нижнього колонтитула у нас ненумерованний список, що містить чотири групи посилань (визначених з допомогою елементів 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.4 s;
-moz-transition: opacity 0.4 s;
transition: opacity 0.4 s;
}
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;
}

Так заголовки виглядають красиво і барвисто без застосування зображень.

Ми закінчили!

Сподіваюся, вам сподобалася ця проста техніка. Вона працює навіть на мобільних пристроях, хоча вам, можливо, захочеться написати пару медиазапросов, щоб вона краще вписувалася в фактор форми.