Интересное применение режимов наложение — улучшение внешнего вида диаграмм и графиков. Сегодня мы испробуем этот метод на живом примере, который известен каждому. Мы возьмем классическую диаграмму Эйлера — Венна, иллюстрирующую принцип «быстро, дешево, качественно».

Улучшение диаграмм  Эйлера — Венна  с помощью режимов наложения 

Разметка SVG для простой диаграммы будет выглядеть так:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <title>Project Triangle</title>
    <desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc>
    <style type="text/css">
        svg { background: #1c1c38; }
        circle { opacity: 0.76; }
        text {
            font-family: Avenir Black, Avenir, sans-serif;
            font-weight: 700; font-size: 36px;
            }
    </style>
    <circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" />
    <circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" />
    <circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap" />
    <text x="100" y="165" id="fast">FAST</text>
    <text x="310" y="165" id="good">GOOD</text>
    <text x="190" y="340" id="cheap">CHEAP</text>
</svg>

Обратите внимание, что можно было оставить свойство прозрачности у всех тегов кругов, так как оно также объект SVG, вместе с объявлением шрифтов. Мы записали эти свойства как стили, чтобы сэкономить место и избежать ненужного повторения. Атрибут aria-labelledby использован для доступности, чтобы связать каждый круг с подходящим текстом.

Это действительно хорошее начало, но можно улучшить внешний вид диаграммы, добавив свойство режима наложения элементам круга:

circle {
    opacity: 0.76;
    mix-blend-mode: color-dodge;
}

Результат можно увидеть выше.

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

Как и свойство прозрачности, можно было применить свойство режимов наложения как чистый SVG, в виде фильтров <feBlend>, так как, как и многие другие современные свойства CSS, режимы наложения уходят корнями в синтаксис SVG.  Здесь использована версия CSS, так как это улучшение презентации, а не необходимость, и синтаксис CSS намного проще для записи и использования.

Улучшение гистограмм с помощью режимов наложения 

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

div {
    background-image: url(new-york-city-skyline.jpg);
    background-size: cover; font-size: 0;
}
svg {
    background: #fff; mix-blend-mode: lighten;
}
rect {
    fill: #202020;
    width: 42.4px;
}

Мы могли бы немного улучшить эффект, изменив размер фонового изображения, в таком виде изображение находится и на осях X и Y.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание трехмерных очков с использованием режимов наложения CSS
• Многослойные эффекты с использованием свойств CSS геометрии обрезки, фильтров и режимов наложения
• Создание улучшенных фонов с помощью режима наложения