В современном вебе CSS нужен уже не только для того, чтобы оформлять стили заголовков. В 2019 году на стилях делают меню, настраивают анимацию и делают трёхмерные сайты. Сегодня — обзор интересных CSS-свойств и их применение.
Липкие блоки
Пример: Codepen
Что используем: sticky
Недавно в CSS появились «липкие» блоки — они создают такие элементы на странице, которые при скролле остаются на своём месте. Но как только до них доезжают другие блоки, залипший тоже начинает двигаться. Получается, что он «липкий» до тех пор, пока не мешает другим, — потом ведёт себя как обычный блок. Раньше для такого нужен был JavaScript, а теперь вон до чего техника дошла!
Пока полностью это работает только в Хроме и Сафари, но для других браузеров можно указать, что это как бы обычный блок:
.sticky {
position: static; /* указываем перед sticky */
position: sticky;
top: 0px; /* обязательно указываем позицию элемента */
}
Галерея в стиле Pinterest
Пример: Codepen
Что используем: общий контейнер со свойствами column-width и column-gap
Чтобы сделать такую же сетку, как в Pinterest, используют колонки с хитростью: кладут изображения в общий контейнер и подключают CSS. Чтобы один элемент не разрывался между двумя колонками, нужно добавить изображениям свойство column-break-inside: avoid.
Плавное кадрирование
Пример: Codepen
Что используем: object-fit и object-position
Раньше обрезать изображение было непросто, но в новом CSS появились два классных свойства — object-fit и object-position. Они меняют размеры и положение картинки, не трогая соотношения сторон. Можно, конечно, кадрировать картинку и в редакторе, но с CSS это будет плавно и эстетично.
В примере по ссылке вы увидите, как это работает: просто нажмите на чекбокс и попробуйте не сделать это снова :)
Увеличение картинок при наведении
Пример: Codepen
Что используем: оборачиваем img в свойство overflow со значением hidden
Популярный и простой приём, который визуально выделяет картинки на странице. Смысл его в том, что картинка слегка увеличивается при наведении на неё курсора, но остаётся в прежних габаритах.
Текст с картинкой в рамке
Пример: Codepen
Что используем: display:grid и grid-row.
Любопытное свойство, которое позволяет быстро генерировать картинки с текстом внизу и рамкой по кругу. Рамка тоже умная: на текст не залезает, если нужно — станет длиннее или короче, чтобы не мешать надписи.
Классная штука для быстрого создания фирменных картинок в больших объёмах.
Классика: ховер
Пример: Tympanus.net
Что используем: hover.
:hover — это псевдокласс, который применяется к объекту, если на него наведён курсор мыши. Можно сказать «при наведении подкрась ссылку красным» или «при наведении убери подчёркивание». Вот это «при наведении» и есть псевдокласс :hover.
Это настолько фундаментальное свойство CSS, что используется практически везде, где есть интернет или веб-технологии. Без него любой обзор свойств будет неполным, потому что без обработки наведения мыши на элемент половина свойств просто перестанет работать.
Главная фишка ховера — его универсальность. На него можно повесить что угодно и обрабатывать это как угодно. Иногда нам кажется, что если его отключить, то половина интернета просто перестанет работать.
