Передовые возможности CSS, доступные уже сегодня

Дата публикации: 2014-12-22

От автора: Последние обновления CSS3 открыли для нас новые, встроенные в браузеры, возможности по изменению дизайна веб-приложений, например, скругление углов у блоков, добавление градиентов, нескольких фонов для одного элемента и тени. И CSS продолжает развиваться дальше. А возможности, которые появились в CSS сейчас, уже очень напоминают те инструменты, которыми мы привыкли пользоваться в любимом графическом редакторе.

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

Режимы наложения

Новая возможность CSS по использованию режимов наложения позволяет нам наложить на фоновый слой элемента другой слой. В настоящий момент свойство background-blend-mode имеет самую хорошую поддержку по сравнению с остальными свойствами, отвечающими за режимы наложения. Оно позволяет манипулировать фоновыми изображениями, градиентами и фоновыми цветами.

КАК РАБОТАЕТ РЕЖИМ НАЛОЖЕНИЯ

Обычно свойство background-blend-mode применяют для фонового изображения на цвет фона. Например:

.blend {
  background-image: url('mountains.jpg');
  background-color: #5ece7f;
  background-blend-mode: multiply;
}

.blend {

background-image: url('mountains.jpg');

background-color: #5ece7f;

background-blend-mode: multiply;

}

Когда мы определяем свойство background-blend-mode и указываем значение для режима наложения, то оно смешивает вместе фоновое изображение и цвет фона в соответствии с тем режимом, который мы выбрали. И цвета смешиваются только в том случае, если происходит их частичное совпадение.

Слева: Исходное изображение. Справа: Изображение с режимом наложения – умножение.

Также как и в программе Photoshop, режим наложения multiply (умножение) затемняет изображение путем умножения цветов фонового изображения элемента с классом .blend с указанным фоновым цветом. Вы можете посмотреть все значения режимов наложения здесь.

Мы можем использовать свойство background-blend-mode со всеми HTML элементами, даже с canvas и video. Это свойство также замечательно работает с CSS градиентами и несколькими фонами. Вот простой демо-пример, который позволит вам посмотреть каждый из режимов в действии.

БРАУЗЕРНАЯ ПОДДЕРЖКА

В настоящее время последние версии браузеров Chrome, Safari, Firefox и Opera поддерживают свойство background-blend-mode. Следите за появлением нового свойства mix-blend-mode, отвечающего за наложение цветов одного элемента с цветами содержимого и фона элемента, находящегося снизу.

На самом деле мы уже сейчас можем поэкспериментировать с mix-blend-mode, активировав «Экспериментальные возможности веб-платформ» в chrome://flags и opera://flags. И похоже, что браузер Firefox, начиная с версии 32 и выше, будет поддерживать свойство mix-blend-mode.

Источники по режимам наложения:

Знакомство с режимами наложения в CSS

Режимы наложения в CSS

Режимы наложения в CSS могут стать новым прорывом в веб-дизайне

CSS маски

С новой CSS возможностью по использованию масок мы можем затемнять части элемента путем наложения маски на определенные области. Один из вариантов функционирование масок – это использование графики в качестве индикатора яркости/освещенности или альфа-канала слоя-маски для отображения частей элемента.

Например, мы можем использовать PNG маску освещенности в качестве маски для любого изображения. Чем меньше будет непрозрачность отдельной части изображения-маски, тем меньше будет видимость элемента в указанной позиции.

В данном изображении-маске темные области отвечают за полную прозрачность. Давайте посмотрим, как работает свойство mask-image, путем применения маски освещенности в качестве фона для заголовка h1.

Слева: маска освещенности. Справа: Обратите внимание, что произойдет с заголовком h1 «Poly», когда мы применим изображение-маску.

h1 {
  mask-image: url('mask.png');
  mask-repeat: no-repeat;
  mask-size: 1440px;
}

h1 {

mask-image: url('mask.png');

mask-repeat: no-repeat;

mask-size: 1440px;

}

Когда мы применяем маску к заголовку h1, мы видим, что вершины гор закрывают –– или маскируют –– нижние части текста. Смотрится довольно изящно!

Вот анимированный демо-пример, который показывает текст в элементе h1, размещенный за маской.

БРАУЗЕРНАЯ ПОДДЕРЖКА

В настоящее время браузеры на движке WebKit/Blink поддерживают большинство свойств по использованию масок с вендорным префиксом -webkit-. Поддержка масок в IE до сих пор находится «на рассмотрении», а Firefox поддерживает только использование встроенных SVG элементов-масок –– мы как раз рассмотрим их далее!

CSS свойство clip-path

Похожим образом (как и альфа-маски и маски освещенности) можно использовать и свойство clip-path, чтобы описать видимые области элемента.

Свойство clip впервые было представлено в спецификации CSS 2.1 для определения видимых участков элемента. Но это свойство предназначалось только для прямоугольных форм, и работало только с абсолютно позиционированными элементами. Возможно это стало причиной замены свойства clip на свойство clip-path с новыми возможностями.

ИСПОЛЬЗОВАНИЕ СВОЙСТВА CLIP-PATH

Используя свойство clip-path, мы можем не ограничиваться лишь прямоугольными отсеченными областями. Мы можем нарисовать область в виде основных геометрических фигур, многоугольников или SVG элементов. Все, что будет находится за пределами данной области, не будет отображаться.

В следующем примере мы используем функцию polygon(), чтобы нарисовать область, отображающую небольшой участок изображения «mountains.jpg».

.wrapper {
  clip-path: polygon(307px 423px,431px 204px,256px 92px,118px 226px);
  background: url('mountains.jpg');
}

.wrapper {

clip-path: polygon(307px 423px,431px 204px,256px 92px,118px 226px);

background: url('mountains.jpg');

}

Похожим образом мы можем использовать SVG в качестве отсеченной области, используя clip-path: url(). В SVG мы создаем отсеченную область с помощью элемента clipPath. Вместо определения координат (точек) многоугольника для clip-path в CSS, мы можем сделать это, используя SVG:

<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="307 423,431 204,256 92,118 226"></polygon>
  </clipPath>
</svg>

</clipPath>

</svg>

Затем в качестве значения для clip-path мы используем url() для указания координат (точек) многоугольника в элементе clipPath:

.wrapper {
  clip-path: url('#clipPolygon');
  background: url('mountains.jpg');
}

.wrapper {

clip-path: url('#clipPolygon');

background: url('mountains.jpg');

}

Вот еще более сложный пример, использующий координаты многоугольника, чтобы нарисовать участок, который обрисовывает вершины гор на фоновом изображении. На этот раз, вместо использования маски освещенности, мы можем имитировать предыдущий пример с использованием CSS маски с помощью использования SVG многоугольника. Я воспользовался этим удобным clip-path генератором, чтобы нарисовать и получить координаты многоугольника.

Функция polygon() является самой сложной функцией для использования отсеченных областей, но мы также можем использовать базовые функции, например, circle(), inset() и ellipse().

БРАУЗЕРНАЯ ПОДДЕРЖКА

По последним данным Firefox поддерживает только синтаксис url(). В то время как последние версии Chrome, Safari и Opera поддерживают и многоугольные формы и синтаксис url().

Заключение

Сегодня мы узнали, что применение различных эффектов, как в программе Photoshop, для HTML содержимого с использованием простого синтаксиса CSS, дает нам больше свободы и гибкости при создании приложений для веб. Встроенные в браузеры возможности редактирования графики помогают нам уменьшить зависимость от графического программного обеспечения – и это здорово!

А вы уже использовали новые возможности CSS? Поделитесь своим опытом и впечатлениями в комментариях.

Автор: Guil Hernandez

Источник: //blog.teamtreehouse.com/

Редакция: Команда webformyself.

Метки: css3