Уроки веб-дизайну. Висувною футер
Я не буду довго розповідати про те, яку роль відіграє футер в сучасних сайтах. Це та частина сторінки, на якій ви можете розмістити посилання на основні розділи сайту, свої контакти, короткий текст про компанію та багато іншого.
Сьогодні ми навчимося робити висувний футер за допомогою CSS. Він буде красиво виглядати на будь-якому Лендінзі, і працює практично на всіх сучасних браузерах.
Приступимо - відкривайте свій улюблений редактор.
Відео: Основи PHOTOSHOP Для Веб-Дизайнерів [Великий Урок]
Як виглядає кінцевий результат
Відео: Жахливі ПОМИЛКИ Веб-Дизайнерів. урок
ідея
Ефект виглядає так, немов сторінка піднімається, подібно слайду, і відкриває сховався під нею футер. Щоб досягти цього, потрібно:
- Весь зміст сторінки, крім футера, має перебувати в одному контейнері (в нашому випадку). Цьому елементу буде присвоєно значення z-index: 1.
- Футера потрібно присвоїти негативне значення z-index: -2. Це забезпечить колір фону, і звільнить місце для фіксованої частини колонтитула (посилання і барвисті заголовки);
- Ще потрібно створити меню в підвалі, задати йому фіксоване позиціонування по відношенню до нижньої частини вікна (position: fixed). Воно повинно мати Z-індекс нижче елемента #main, але вище, ніж футер (в нашому випадку - z-index: -1).
Які ще уроки ви хотіли б вивчити? Напишіть мені на пошту: [email protected]. Рада буду знайти для вас щось цікаве і корисне!
Статті за темою "Уроки веб-дизайну. Висувною футер"
Оцініть, будь ласка статтю
Ще статті розділу
