Это статья о некоторых полезных приемах работы CSS, которые пригодятся для вашего сайта.
Содержание:
- «Липкий» футер
- Увеличение изображений при наведении
- Мгновенный ночной режим (Night Mode)
- Кастомные буллиты для списков
- Параллакс-изображения
- Анимация с обрезанными изображениями
- Режимы смешивания
- Галерея в стиле Pinterest
1. «Липкий» футер
Футер всегда должен находиться внизу страницы. В большинстве случаев нужно, чтобы футер «прилипал» снизу экрана и всегда был доступен, а также адаптировался под различные расширения экранов.
Несмотря на простоту реализации, для начинающих верстальщиков решение может оказаться целой загадкой.
До появления CSS3 сложно было реализовать такой эффект без знаний точной высоты футера. И, хотя мы называем его «липким», мы не можем воспользоваться только свойством position:sticky. Но зафиксированный таким образом футер, может перекрывать контент.
На сегодняшний день наиболее совместимым решением является использование Flexbox. И чтобы предотвратить нежелательное поведение, мы также добавить свойство flex-shrink: 0. Использование flex-shrink со значением 0, предотвратит сужение футера и сохранит его размеры.
See the Pen Sticky Footer by Katrin Uteva (@katrinuteva) on CodePen.
2. Увеличение изображений при наведении
Эффект увеличения при наведении — отличный способ привлечь внимание к кликабельному изображению. Когда пользователь наводит курсор на него, изображение немного увеличивается, но его размеры остаются прежними.
Чтобы достичь такого эффекта, нужно обернуть обычный тег img в div. Необходимо задать ширину и высоту родительского элемента, а также установить свойство overflow со значением hidden.
Затем можно применить любой вид анимации к изображению.
See the Pen Image Zoom on Hover by Bret Cameron (@BretCameron) on CodePen.
3. Мгновенный ночной режим (Night Mode)
Если вам необходим быстрый способ установить ночной режим для вашего сайта, то используйте фильтры invert и hue-rotate.
filter: invert() может принимать значения от 0 до 1. 1 — это инверсия, белое становится черным.
filter: hue-rotate () изменяет цветовое содержимое элементов таким образом, что они сохраняют более-менее одинаковый уровень отделения друг от друга. Значения варьируются от 0 до 360 градусов.
Если объединить эти эффекты внутри тега body, можно быстро добиться получения ночной версии для сайта (фону в этом случае нужно задать цвет).
Например:
body {
background: #FFF;
filter: invert(1) hue-rotate(210deg);
}
4. Кастомные буллиты для списков
Чтобы создать пользовательские маркеры для неупорядоченного списка, вы можете использовать свойство content вместе с псевдоэлементом :: before.
В приведенном ниже CSS-коде используются два класса .complete и .incomplete для различения двух разных типов маркеров.
ul {
list-style: none;
}
ul.complete li::before {
content: '? ';
}
ul.incomplete li::before {
content: '☐ ';;
}See the Pen Checklist by Bret Cameron (@BretCameron) on CodePen.
Бонус — навигационные хлебные крошки
Есть еще полезный способ использования свойство content. Этот эффект основан на псевдоклассе — last-child и доступен только в CSS3:
.breadcrumb a:first-child::before {
content: " » ";
}
.breadcrumb a::after {
content: " /";
}
.breadcrumb a:last-child::after {
content: "";
}See the Pen Breadcrumbs by Bret Cameron (@BretCameron) on CodePen.
5. Параллакс-изображения
Эффект параллакса в веб-дизайне очень популярен: он может оживить страницу при прокрутке. При этом изображение будет оставаться фиксированным несмотря на перемещение контента.
Простую версию подобного эффекта легко сделать на одном лишь CSS, используя свойство background-attachment: fixed, противоположное background-attachment: scroll.
See the Pen Simple Parallax Image by Bret Cameron (@BretCameron) on CodePen.
Для более продвинутого эффекта можно использовать JavaScript. Благодарим Ренана Брено за этот CodePen, который демонстрирует некоторые возможности:
See the Pen Simple Image Tag Parallax by Renan Breno (@RenanB) on CodePen.
6. Анимация с обрезанными изображениями
С помощью двух отличных свойств: object-fit и object-position можно изменять размеры изображения, не влияя на соотношение его сторон.
Конечно, всегда можно обрезать изображение в редакторе, но благодаря CSS инструментам мы можем все это дело анимировать.
В следующем примере эффект запускается с помощью тега . Таким образом, мы можем использовать преимущества CSS: псевдокласс :checked.
See the Pen Cropped Image Animation by Bret Cameron (@BretCameron) on CodePen.
7. Режимы смешивания
Если вы работали с Photoshop, то знаете, насколько мощным инструментом могут быть режимы смешивания цветов. Оказывается, большинство из них могут быть использованы и для создания различных CSS-эффектов.
Вот так будет выглядеть главная страница Medium, если изображениям на ней добавить фон lightblue и применить режим смешивания background-blend-mode: difference:
Но работать можно не только с фонами. Свойство mix-blend-mode позволяет смешивать с нижними слоями цвета самого элемента.
Примечание. В настоящее время в Chrome 58+ имеется ошибка, из-за которой режим mix-blend-mode не отображает элементы, установленные на прозрачных тегах body или html. Быстрое решение состоит в том, чтобы задать этим тегам белый цвет фона.
See the Pen Using mix-blend-mode by Bret Cameron (@BretCameron) on CodePen.
8. Галерея в стиле Pinterest
CSS Grid и Flexbox значительно упростили создание различных типов адаптивных макетов и позволяют легко центрировать элементы по вертикали на странице. Тем не менее, один из стилей макета, к которому они плохо подходят, — это тот, который используется Pinterest.
Лучший способ добиться этого — использовать набор CSS-свойств для создания колонок. Часто его используют для создания многостраничного текста в газетном стиле, но мы используем его в случае с картинками.
Нужно обернуть все изображения в общий контейнер и присвоить свойства column-width и column-gap. Затем, чтобы предотвратить разделение элементов между двумя столбцами, добавьте параметр column-break-inside: avoid.
See the Pen Pure CSS Pinterest Columnar Layout by Dudley Storey (@dudleystorey) on CodePen.
В этом же примере демонстрируются супер-возможности CSS-псевдокласса :not. В комбинации с :hover он позволяет сделать все элементы кроме активного полупрозрачными.
Перевод статьи: 8 useful CSS tricks: Parallax images, sticky footers and more
