| Kosten | Суббота, 07 Июля 2018, 21:43 | Сообщение 1 |
| Липкие нижние колонтитулы, это нижние колонтитулы, которые отображаются в нижней части экрана независимо от того, где вы и насколько далеко прокрутили страницу. Здесь у нас будет необычный, если отходить от стандарта, все верно, выставим красивую анимацию на него, что совершенно по другому все смотрится. Теоретически положение липкого нижнего колонтитула никогда не должно меняться, и оно всегда должно быть видимым на экране пользователя.
Создание липкого нижнего колонтитула с помощью CSS на самом деле довольно просто, и в основном просто связано с установкой свойства позиции нижнего колонтитула на фиксированное. Взгляните на код ниже, чтобы посмотреть, как это делается. Для целей этого примера предположим, что наш нижний колонтитул имеет идентификатор липкого нижнего колонтитула.
Свойства высоты и фона полностью зависят от вашего усмотрения. Когда вы устанавливаете высоту, просто помните, что нижний колонтитул всегда будет застревать в нижней части экрана, поэтому вы, вероятно, не хотите, чтобы он был слишком высоким и занимал слишком много вашей страницы в любой момент времени.
С эффектами ваш собственный творческий потенциал является пределом. Где для эффекта была добавлена тень, это для тех, у кого фон светлый.
Анимированный фон:
HTML
Код <footer id="torialonacr-eatingimple">Создать липкий нижний колонтитул на CSS - 2018</footer>
CSS
Код #torialonacr-eatingimple {
width: 100%;
padding: 45px;
padding-bottom: 56px;
background: #191818;
color: #f7f1f1;
font-weight: bold;
font-size: 23px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
border-top: 2px solid #eae6e6;
box-shadow: 0px -9px 10px rgba(66, 59, 59, 0.31), 0px -9px 27px -15px rgba(39, 36, 36, 0.83);
background-image: url(http://zornet.ru/ABVUN/sarunolas/zornet/0b5934b623f3c6f5377f221959d77982.gif);
}
В приведенном выше примере позиция установлена на фиксированную, а левое и нижнее значения равны нолю. Это самые важные свойства, которые следует включить в ваш фиксированный заголовок. Ширина 100% рекомендуется, но не нужна для создания фиксированного нижнего колонтитула, это действительно зависит от того, как вы хотите, чтобы нижний колонтитул выглядел и насколько он вам понравился.
Вывод:
В этом мануале вы узнали, как сделать относительно простой липкий нижний колонтитул без необходимости полагаться на какие-либо внешние библиотеки или неприятные методы. Я показал вам, как привязать нижний колонтитул к нижней части страницы или к низу или к окну вашего браузера. Я показал вам, как получить базовую отзывчивость и как заполнить нижний колонтитул контентом. Затем мы рассмотрели некоторые аккуратные эффекты, которые, надеюсь, дали вам некоторое вдохновение.
Также если вам нужно поменять формат, то просто нужен формат GIF, что меняем ссылку в стилях CSS, и сразу бругая картина, также делаем выше или низе.
Демонстрация
| | Страна: (RU) |
| |
