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

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

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

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

Идея

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

CSS

Как вы уже догадались, здесь как раз все становится интереснее. В начале учебника я упоминал, что мы будем работать с отрицательными z-index’ами, чтобы колонтитул был зафиксирован по низу экрана. Есть очень хорошая статья, подробно объясняющая z-index’ы, которую я весьма рекомендую прочесть перед тем, как продолжить дальше. Не беспокойтесь, я подожду.
Первое, что нужно сделать – это создать контекст, располагающийся по вертикали, на элементе body (подойдет любой элемент, содержащий как нижний колонтитул, так и div #main). Если этого не сделать, по моему опыту, отрицательные z-index’ы не будут работать в мобильном Safari и старых IE. Для создания складирующегося один на другой контекста нам нужно только задать ему z-index и позиционирование:

assets/css/styles.css

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Значения z-index’а в 1 достаточно, чтобы выдвинуть элемент над всеми остальными на странице, у которых нет определенных наборов z-index’ов. В большинстве браузеров этого достаточно, чтобы добиться нужного нам поведения, но, к сожалению, у мобильного Safari имеется проблема с повторным графическим отображением, что неизбежно влечет за собой установку отрицательных z-index’ов к нижнему колонтитулу. Еще нам нужно установить на элементе #main фон, иначе мы будем видеть нижний колонтитул сквозь него.

А вот и нижний колонтитул:

Я установил значение z-index на -2. Что сдвигает его за div #main. Обратите внимание, что этому элементу нужно назначить высоту, потому что элемент UL внутри него имеет фиксированное позиционирование и не станет увеличивать родительский элемент до своего размера.

Следующий – элемент UL внутри него, фиксированный по окну браузера:

Он установлен на z-index в -1, который заставляет его показываться ниже элемента #main, но выше нижнего колонтитула, что нам как раз и требуется. Прием с z-index’ом на этом заканчивается, но заслуживают упоминания еще несколько стилей:

При назначении этих стилей нужно быть очень осторожным, потому что в нижнем колонтитуле содержатся вложенные UL’ы, которые могут перепутаться. Для ограничения эффекта этих стилей я применяю дочерний селектор CSS >.

Далее идет логотип компании. Изображение показывается из спрайта как элемент :before.

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

Еще один примененный мною здесь прием заключается в том, что я установил непрозрачность элементов на 0.9 и определил переход, который станет плавно анимировать непрозрачность при ее изменении. При проведении мышью непрозрачность установлена на 1, что запускает анимацию.

И последнее – вот разные цветовые темы, созданные с помощью некоторых градиентов CSS:

Так заголовки выглядят красиво и красочно без применения изображений.

Мы закончили!

Надеюсь, вам понравилась эта простая техника. Она работает даже на мобильных устройствах, хотя вам, возможно, захочется написать пару медиазапросов, чтобы она лучше вписывалась в фактор формы.

Автор: Martin Angelov

Источник: http://tutorialzine.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree