11.09.13, 14:03
0 комментарий
  Уроки

Создаем выезжающий подвал при помощи хитрого трюка с z-index

В сегодняшнем руководстве мы хотим рассказать вам о процессе разработки интересного эффекта с выезжающим подвалом, который реализуется при помощи кода CSS.

Суть

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

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

Следующая иллюстрация поможет вам лучше понять, о чем идет речь:

Создаем выезжающий подвал при помощи хитрого трюка с z-index


Теперь давайте перейдем к коду!

HTML-код

Ниже вы можете видеть разметку страницы. Это обычный HTML5-документ, в разделе head у которого мы указываем шрифт из Google Webfonts, и HTML5 shim для старых версий браузеров 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="http://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>


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

Создаем выезжающий подвал при помощи хитрого трюка с z-index


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, чтобы сайт также адаптировался и под габариты устройства.

Исходники в архиве.

СКАЧАТЬ

Вес файла
13.76 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204