8 простых, но полезных CSS-эффектов для вашего сайта

0
8397
Добавить в избранное

Параллакс, ночной режим, смешивание цветов, липкий футер и еще несколько несложных, но неочевидных CSS-эффектов, которые вам пригодятся.

8 простых, но полезных CSS-эффектов для вашего сайта

Здравствуйте!

Искали список CSS трюков? Мы его для вас уже собрали.

Липкий футер

Футер всегда должен «прилипать» к низу страницы – это негласное правило дизайна веб-сайтов. Для начинающих верстальщиков оно может превратиться в головоломку. Как растянуть контейнер, если контента в нем мало, но при этом избежать переполнения при большом количестве текста?

До CSS3 не было простого способа решить эту проблему. Приходилось использовать разного рода трюки и почти всегда устанавливать для подвала фиксированную высоту.

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

К счастью, сейчас решение есть – это Flexbox. Контейнер с основным контентом можно растянуть с помощью свойства flex-grow. Прямой потомок flex-контейнера со значением flex-grow, отличным от 0, будет стараться занять все свободное место. В примере использована короткая версия свойства flex: auto. Она устанавливает для flex-grow значение по умолчанию, то есть 1.

Для футера можно установить flex-shrink: 0, чтобы предотвратить нежелательное поведение. Фактически это свойство противоположно flex-grow. Оно контролирует сжатие элементов при нехватке места в родительском контейнере. Со значением 0 футер гарантированно сохранит свой исходный размер.

Увеличение изображений CSS при наведении

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

Для достижения подобных CSS-эффектов нужны дополнительные обертки над тегами img с установленными размерами. Им следует установить свойство overflow со значением hidden, чтобы увеличенная картинка не переполнила контейнер.

Теперь к изображению можно применять любую трансформацию.

Мгновенный ночной режим

Если вы хотите быстро добавить вашему веб-сайту популярный «ночной режим», обратите внимание на CSS фильтры invert и hue-rotate.

  • filter: invert() – инвертирует исходный цвет на указанное количество процентов. Если передать в функцию фильтра 1 (или 100%) белый цвет превратится в черный, а изображение – в свой негатив.
  • filter: hue-rotate() – определяет угол поворота на цветовом круге, на который смещаются все цвета исходной картинки. Соответственно значение параметра должно быть от 0deg до 360deg.

Просто добавьте эти свойства тегу body. Вы увидите, как может выглядеть ваш сайт в ночном режиме.

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

Вот так выглядит главная страница Google с такими настройками:

8 простых, но полезных CSS-эффектов для вашего сайта

Буллиты для списков

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

Чтобы изменять вид буллита в примере, применяются классы .complete и .incomplete.

Бонус

Тот же трюк со свойством content можно использовать для хлебных крошек. Нет смысла добавлять разделители элементов крошек в HTML сайта, ведь они выполняют только стилистическую функцию. Так что добавим их с помощью CSS, не забывая также убрать разделитель после последнего элемента.

Параллакс

Эффект параллакса в веб-дизайне очень популярен: он может здорово оживить страницу при прокрутке. При этом параллакс изображение CSS будет оставаться фиксированным несмотря на перемещение контента.

Простую версию подобного эффекта легко сделать на одном лишь CSS, используя свойство background-attachment: fixed, противоположное background-attachment: scroll.

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

Анимация кадрирования фото

До CSS3 обрезать изображения было очень непросто, если помните. Но теперь у нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

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

В примере вы можете запустить этот эффект с помощью чекбокса: он привязан к псевдоклассу :checked.

Режимы смешивания

Если вы работали с Photoshop, то знаете, насколько мощным инструментом могут быть режимы смешивания цветов. Оказывается, большинство из них могут быть использованы и для создания различных CSS-эффектов.

Вот так будет выглядеть главная страница Medium, если изображениям на ней добавить фон lightblue и применить режим смешивания background-blend-mode: difference:

8 простых, но полезных CSS-эффектов для вашего сайта

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

Но работать можно не только с фонами. Свойство mix-blend-mode позволяет смешивать с нижними слоями цвета самого элемента.

Например, можно получить вот такой классный эффект, просто добавив тексту цвет lightsalmon и режим смешивания mix-blend-mode: color-dodge.

8 простых, но полезных CSS-эффектов для вашего сайта

Обратите внимание: в Chrome 58+ есть ошибка, из-за которой свойство mix-blend-mode не работает на тегах body или html, если они имеют прозрачный фон.

Галерея картинок в стиле Pinterest

CSS Grid и Flexbox значительно облегчили построение адаптивных макетов, центрирование элементов и создание CSS-эффектов. Тем не менее, у нас осталась еще одна нерешенная проблема.

Как создать разметку, в которой позиция элемента по вертикали зависит от высоты элемента, расположенного над ним, как на Pinterest?

8 простых, но полезных CSS-эффектов для вашего сайта

Лучший способ добиться этого – использовать набор CSS-свойств для создания колонок. Обычно его используют для многоколоночного текста в газетном стиле, но и в случае с картинками он вполне может пригодиться.

Просто оберните все изображения в общий контейнер и добавьте ему свойства column-width и column-gap.

Чтобы один элемент не разрывался между двумя колонками, добавьте самим изображениям свойство column-break-inside: avoid.

В этом же примере демонстрируются супер-возможности CSS-псевдокласса :not. В комбинации с :hover он позволяет сделать все элементы кроме активного полупрозрачными.

Еще больше CSS-эффектов

Мы разобрали решение нескольких простых задач создания веб-сайтов, однако их осталось еще очень много, например:

Оригинал: 8 useful CSS tricks: Parallax images, sticky footers and more

Вас также заинтересуют:

Дополните список любимыми CSS-трюками, и они обязательно попадут в следующую статью.

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




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