Если у вас уже есть некоторый опыт веб-разработки, вы заметили, что раз от раза начинаете проект с одной и той же раскладки. Новые веяния приходят и уходят, а большая часть сайтов не меняется: почти все они используют 12-колоночную сетку, 2 или 3 колонки рабочей области, блочную верстку и схожие формы. Это довольно скучно и не добавляет интересного пользовательского опыта.
Поищем вдохновения за пределами веба. Печатные издания выглядят потрясающе, почему бы не использовать их опыт с помощью новых CSS-свойств.
Технологии раскладки Grid и Flexbox позволяют легко создавать интересные и сложные макеты, но этого недостаточно. CSS способен на большее! Он может создавать стили, выходящие за рамки всего, что вы видели раньше.
Используйте режимы наложения
Двухтонные изображения и различные цветовые эффекты — одна из самых популярных тенденций веб-дизайна. Больше нет необходимости создавать несколько версий одного и того же файла в разных цветах, эффекты можно применять сразу в браузере.
Режимы наложения позволяют не только привести контент к единому стилю , но и легко и непринужденно менять его цвет на лету. Всего есть 15 режимов наложения, в том числе screen, overlay, lighten и darken.
Есть несколько методов реализации подобного эффекта. Например, назначить background-image и background-color для контейнера с background-blend-mode: darken. Или использовать псевдоэлемент, что создаст эффект окрашивания.
Лучше, если исходное изображение будет черно-белым с высокой контрастностью. Для этого можно использовать CSS-фильтры (grayscale и contrast).
Свойство mix-blend-mode позволяет смешивать цвета элемента с цветами его родителя. Это очень эффектно смотрится на перекрывающих друг друга надписях. Похожего эффекта можно добиться, просто изменяя прозрачность блоков, но при этом теряется яркость цветов.
Все это очень здорово, но не забывайте о браузерной поддержке. К сожалению, для режимов наложения она пока ограничена.
Маскируйте
Маскирование позволяет скрывать часть элемента и создавать интересные формы. Для маски используется растровое изображение с прозрачными областями (PNG-формат), CSS-градиенты или SVG.
img {
mask-image: url(‘mask.png’) linear-gradient(-45deg,
rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
mask-image: url(#masking); /*ссылка на SVG-элемент в коде страницы*/
}Если применяется растровое изображение, то его прозрачные фрагменты не будут отображаться.
В печати популярны блоки нестандартной формы, но в вебе их реализовать непросто. Маскировка решает эту задачу, позволяя сочетать тексты и картинки.
Не бойтесь обрезать
Большие возможности в дизайне открывает CSS-обрезка, с помощью которой можно указать видимые области блока. Граница обрезки называется clip-path . Все, что находится внутри нее, будет видимо, остальное отбросится.
clip-path: circle(radius at x, y);
clip-path: url(#clipping); / * ссылка на элемент SVG*/Функция circle устанавливает границу видимости в форме круга. Кроме существующих форм можно использовать SVG. В этой статье Криса Койера рассказывается о создании прозрачного JPG-изображения с помощью SVG-образки.
Обратите внимание: маска — это полноценное изображение, а клип — только векторный путь. Из-за этого маскирование использует больше памяти. Если требуется эффект прозрачности, лучше использовать маску, а для создания четких краев отлично подойдет обрезка.
Выходите за рамки
Кто сказал, что текстовые контейнеры всегда должны быть прямоугольными? Откройте новые формы с CSS-свойствами shape-outside и shape-inside.
Примените следующее правило к плавающему (float) изображению или контейнеру с заданной шириной и высотой:
shape-outside: circle(50%); / * содержимое будет обтекать круг*/Можно использовать функции circle(), polygon(), inset() или ellipse().
Кроме того у свойства shape-outside есть значение url(), которое позволяет определить форму элемента на основе изображения. Его удобно использовать вместо polygon() для сложной графики со множеством кривых и точек.
Чтобы между элементом и остальным контентом было больше пространства, используйте свойство shape-margin, которое работает как обычный margin. Функции форм (но не url()) можно анимировать.
К сожалению, свойство shape-outside плохо поддерживается браузерами.
Попробуйте SVG-анимацию
Сегодняший интернет трудно представить без SVG (scalable vector graphics). Он может масштабироваться без потери четкости, а значит незаменим в адаптивном веб-дизайне.
Кроме того, SVG-графикой можно манипулировать с помощью CSS. Если вы никогда этого не делали, попробуйте прямо сейчас!
В SVG даже можно включить текст, и он останется текстом, то есть будет доступным для поисковиков и пользователей. Его можно редактировать прямо в коде страницы. Не забывайте о подключении нужного шрифта, чтобы все отображалось должным образом.
CSS-анимация SVG-изображений не отличается от анимации обычных элементов. Можно применять эффекты перехода, трансформации и покадровую анимацию. Когда вы разберетесь с SVG-кодом, все станет очень просто и понятно, ведь он не отличается от HTML.
Формат позволяет создавать очень интересные динамические эффекты даже без JavaScript.
Пошумите немного
Глитч из 80-х — хаос, шум и помехи – снова становится популярным трендом. Вы легко можете играть с перспективой и добавлять хаотичности на ваши страницы, искажая элементы с помощью CSS.
Отличный пример искаженного анимированного текста можно найти на Codepen:
transform: skew(60deg, -30deg) scaleY(.66667);Создайте коллаж
Техника коллажей становится в интернете все популярнее (вот пара чудесных примеров — Rosanna Webster и Barrakuz). Она используется, например, на главной странице сервиса MailChimp.
Традиционный подход заключается в простом объединении растровых изображений, подготовленных в графическом редакторе. Однако CSS-свойства позволяют делать то же самое. Можно даже создавать масштабируемые, анимированные, интерактивные коллажи! Вот несколько примеров.
Не забывайте о браузерной поддержке
Используйте CSS-правило @supports, чтобы определить, поддерживает ли браузер интересующее вас свойство.
@supports (mix-blend-mode: overlay) {
.example {
mix-blend-mode: overlay;
}
}Комбинация режимов смешивания, маскирования, обрезки, CSS-форм и SVG открывает огромный простор для веб-творчества. И хотя некоторые свойства все еще плохо поддерживаются браузерами, не бойтесь их использовать, это лишь вопрос времени.
0 комментариев