От автора: если вы работаете в веб-индустрии уже пару лет, у вас могло возникнуть ощущение, что вы всегда программируете или проектируете один и тот же макет сайта. Несмотря на то, что тенденции приходят и уходят, большинство сайтов по-прежнему выглядят одинаково: почти каждый из них использует сетку с 12 колонками, два и три столбца, блоковые макеты и аналогичные формы. На это становится довольно скучно смотреть, и UX тоже так себе.
Пришло время начать черпать вдохновение из полей или областей, выходящих за рамки цифрового дизайна. Печатные и редакционные проекты могут быть красивыми, так почему бы не сломать старые привычки и не попробовать новые CSS трюки, которые открывают совершенно новый мир бесконечных возможностей?
Революция CSS продолжается — такие вещи, как Flexbox или CSS Grid, предлагают простые способы создания интересных макетов. Используя CSS, вы можете создавать визуальные стили, выходящие за рамки тех, с которыми вы можете быть знакомы.
В этой статье мы поделимся советами по CSS, которые парой строк кода помогут сломать стереотипы на ваших макетах веб-сайта.
1. Изучите режимы смешивания CSS
Двухцветные изображения и эффекты цветности — одни из самых горячих тенденций веб-дизайна. Они пользуются большой популярностью в Интернете благодаря Spotify, который реализует их сплоченно. Теперь можно не создавать нескольких разных цветных версий ваших файлов и применять эффекты непосредственно в браузере.
Использование режимов смешивания CSS — это не только отличный способ унифицировать внешний вид контента на веб-сайтах, но они также позволяют устанавливать разные цветовые версии изображения, изменяя только одно значение в CSS: цвет. Существует 15 возможных значений режима смешивания, включая screen, overlay, lighten и darken.
Ortiz Leon Architects используют режимы смешивания для создания двухцветных фоновых изображений
Существует несколько способов реализации, в зависимости от типа элемента, к которому вы хотите применить эффект. Например, вы можете использовать фоновое изображение и фоновый цвет, установленные в режиме background-blend-mode: darken;, или создать наложение с псевдоэлементами (то есть :before и :after) на обертке изображения, чтобы получить эффект окраски.
Чтобы достичь удовлетворительного эффекта двухцветности, рекомендуется использовать высококонтрастное черно-белое изображение. Вы можете сделать это, применив фильтры CSS, чтобы установить оттенки серого и высокий уровень контрастности.
На веб-сайте Bolden есть отличный пример mix-blend-mode, который был полностью реализован в CSS
Еще одно классное свойство — mix-blend-mode, которое позволяет смешивать содержимое элемента с содержимым или фоном его прямого родителя. Это особенно хорошо работает при перекрытии надписей. Вы можете спросить, почему в этом случае мы не просто корректируем непрозрачность — ответ прост: мы можем легко потерять цветную яркость, используя только прозрачность.
Эпоха изображений, которые могут быть отредактированы непосредственно в вашем веб-браузере, идет, но мы не можем забыть о совместимости с браузером. Поддержка на данный момент ограничена для режимов смешивания.
2. Добавьте маску
Маскирование сообщает вашему браузеру, какие элементы должны быть видны, и очень полезно для создания творческих форм и макетов. Маскирование можно выполнить тремя способами: используя растровое изображение (например, формат PNG с прозрачными частями), градиенты CSS или элементы SVG.
Обратите внимание: в отличие от типичного растрового изображения 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); /*referencing to the element generated and defined in SVG code*/
}
Важно отметить, что Firefox поддерживает только последнюю версию, поэтому нам нужно использовать встроенный элемент маски SVG. Что делать, если мы используем растровое изображение с уровнями прозрачности? Прозрачные части изображения не будут видны — другими словами, будут отображаться непрозрачные фрагменты, скрывающие другие фигуры.
Маскирование особенно эффективно, поскольку позволяет вам применять одни и те же свойства к фоновым изображениям, определяя их положение, размер и повторение.
Здесь красный фон — видимая часть, и текст появится из-за гор (щелкните изображение, чтобы увидеть финальную маску)
Один большой пример использования маскирования CSS — в статьях, которые объединяют текст и изображения. Нерегулярные контейнеры и изображения очень популярны в печати, но утомительны и трудоемки для внедрения в Интернете. Но благодаря маскированию, это больше не проблема!
Вы также можете с удовольствием использовать уровни прозрачности, чтобы вырезать часть анимированных изображений (например, файлы GIF). Однако при использовании этих свойств не забывайте о поддержке кросс-браузерности и добавляйте вендорные префиксы.
3. Не бойтесь обрезать
Еще одна замечательная особенность — обрезка CSS. Граница формы называется clip-path (не путать с устаревшим свойством clip), а отсечение определяет, какая область изображения должна быть видимой. Обрезка похожа на вырезание листа бумаги — все, что находится за пределами пути, будет скрыто, в то время как все, что внутри пути будет видно.
clip-path: circle(radius at x, y); clip-path: url(#clipping); /*referencing to SVG element*/
Например, если функция circle устанавливает обтравочную маску поверх изображения, вы увидите только часть изображения внутри этого круга.
Самое приятное в том, что мы можем использовать функции фигур и SVG в качестве clip path, что дает нам много возможностей — например, мы могли бы анимировать их в морфинговые фигуры. Ознакомьтесь со статьей Криса Койера о создании прозрачного JPG с использованием SVG clip path.
С помощью clip path вы можете удалить фон с вашего изображения (нажмите, чтобы увидеть полный пример)
Если вам интересно, какая разница между отсечением и маскированием, тогда помните, что маски — это изображения, а clip path — только векторные пути. Стоит отметить, что маскирование будет потреблять больше памяти, так как вы работаете с полным изображением, поэтому все должно быть выполнено по пикселям.
Вот почему рекомендуется использовать маски, если вам нужен эффект частичной прозрачности; если вы хотите четкие края, лучше всего использовать clip path.
4. Мыслите нестандартно
Shape-outside и shape-inside идут на помощь! Кто сказал, что текстовые контейнеры всегда должны быть прямоугольными? Давайте буквально выйдем за пределы привычного и откроем новые формы, делая наши макеты страниц богаче и менее квадратными. свойства shape-outside и shape-inside позволяют вам обертывать ваш контент вокруг пользовательских путей в CSS.
Итак, как это работает? Просто примените следующий код к данному плавающему изображению или контейнеру:
shape-outside: circle(50%); /* content will flow around the circle*/
Важно отметить, что должно быть определено свойство float и размеры элемента — высота и ширина, иначе это не сработает. Для фигуры вы можете использовать circle(), polygon(), inset() или ellipse().
Другим возможным значением является функция url (). В этом случае это свойство shape-outside определяет форму элемента на основе изображения. Вы можете использовать функцию url () вместо polygon (), когда у вас есть особенно сложная графика с множеством кривых и точек, и вы хотите, чтобы содержимое обтекало ее плавно.
Используйте DevTools, чтобы посмотреть, как форма, которую вы разработали для текста, ведет себя (щелкните изображение, чтобы увидеть этот пример)
Если вы хотите создать больше пространства между вашим элементом и контентом, используйте свойство shape-margin, которое будет действовать точно так же, как margin. Функции формы могут быть анимированы, но только для определенных полигонов — функция url (), к сожалению, не может быть анимирована.
Поддержка браузера для shape-outside ограничена на данный момент, но скрестите пальцы для быстрой реализации в других браузерах.
5. Попробуйте SVG для анимации
Честно говоря, я не могу представить сегодняшний веб без SVG (масштабируемая векторная графика). Его название говорит само за себя — он масштабируется, поэтому отвечает на все вопросы, касающиеся адаптивного веб-дизайна. Изображение SVG будет четким, независимо от разрешения экрана устройства, на котором оно просматривается.
Помимо масштабируемости, есть еще одна особенность, которая должна побуждать вас играть с SVG: возможность управлять SVG с помощью CSS. Если вы никогда не пробовали заниматься CSS-анимацией и SVG-кодом, вы должны попробовать это сейчас — невероятно, как быстро вы можете добиться потрясающих эффектов.
Это анимированное слайд-шоу — это презентация Aga в CSSconf Nordic и полностью создана в HTML и SVG (нажмите, чтобы увидеть ее в действии)
Вы можете подумать, что в некоторых случаях проще использовать растровые изображения, однако SVG имеет одно большое преимущество перед обычными изображениями. Слова, включенные в SVG, хранятся в теге text и поэтому остаются текстом, что делает его доступным для поиска, выбираемым и доступным. Это также означает, что вы можете редактировать его непосредственно в коде. Тем не менее, мы должны помнить о том, что необходимо встроить шрифт, чтобы убедиться, что он будет отображаться.
Анимация SVG с помощью CSS похожа на анимацию любого другого элемента в HTML – она может быть с переходами, преобразованиями и анимацией ключевых кадров. Как только вы познакомитесь с SVG-кодом, остальное просто и очень интуитивно, потому что вы в основном делаете это так же, как и в HTML.
Самое крутое в SVG — это то, что вы можете захватить любую часть, которую хотите, и оживить анимацию CSS. Это означает, что мы можем создать очень интересные динамические эффекты, не обязательно используя JavaScript. SVG имеет свой собственный DOM API, поэтому на самом деле весь SVG-код можно легко проверить с помощью DevTools, который я настоятельно рекомендую использовать при изучении этой темы.
6. Пошумите
1980-е и 1990-е годы вернулись! Glitch — эстетика хаоса, шума и заклинивания — становится популярной тенденцией дизайна в этом году. Празднование глюков, сбоев и ошибок можно увидеть и в Интернете. Если вы хотите играть с перспективой и быть более визуально хаотичным, вы можете сделать это легко, изменив и перекосив элементы вашего сайта.
Этот эффект очень легко программируется и добавляет сильный визуальный акцент на веб-сайте (нажмите, чтобы увидеть его в прямом эфире)
Прекрасный пример того, как это сделать только в CSS, можно найти в Captain Anonymous CodePen, который представляет искаженный, анимированный текст. Одна строка кода делает магию:
transform:skew(60deg, -30deg) scaleY(.66667);
7. Проявите креативность с коллажем
Проекты, вдохновленные коллажем, наслаждаются моментом в изобразительном искусстве — при исследовании этой статьи работа Розанны Вебстер и Барракуз сразу же украла мое сердце — и даже в Интернете они все больше и больше популярны. Если у вас есть сомнения, ознакомьтесь с домашней страницей MailChimp (ниже). Вы заметили коллаж?
Начальные коллажи Mailchimp были созданы с использованием игровых свойств CSS
Традиционный подход состоит в том, чтобы просто прикрепить растровые изображения, которые были подготовлены в графическом редакторе, но с методами, которые я обсуждал в этой статье, можно создавать подобные эффекты с помощью свойств CSS. Вы даже можете подготовить коллажи, которые действительно приспосабливаются к требованиям Интернета — и масштабируемы, анимированы и интерактивны.
Я подготовил несколько примеров, используя все эти классные свойства CSS, так что вы можете увидеть, как их можно комбинировать для достижения стиля коллажа в Интернете. Взгляните на мои примеры.
8. Не забывайте поддержку браузера
Если вы чувствуете задержку, когда хотите использовать свойства CSS, которые, как вы подозреваете, не поддерживаются всеми браузерами, вам поможет правило @supports. @supports позволяет вам проверить поддержку браузера для CSS пар свойство:значение.
Код, который включен в блок @supports, будет отображаться только в том случае, если эти условия верны, иначе код не будет прочитан браузером. В случае, когда браузер не понимает @supports, он также не генерирует данную часть кода.
@supports (mix-blend-mode: overlay) { .example { mix-blend-mode: overlay; } }
Комбинирование таких функций, как режимы смешивания, маскирование, обрезка, формы CSS и мощь SVG, дает нам отличный набор инструментов для повышения нашего творчества и выхода из нормы. С помощью этих инструментов у нас есть возможность создать веб-версию вещей, которые мы сейчас видим в печати.
Хотя некоторые свойства могут по-прежнему испытывать проблемы с совместимостью браузеров, не стесняйтесь играть с ними. Хотя поддержка браузера сейчас может быть ограничена, в будущем это изменится. Это всего лишь вопрос времени.
Автор: Aga Naplocha
Источник: https://www.creativebloq.com/
Редакция: Команда webformyself.
