Использование CSS3 mask для создания универсальных иконок

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

Проблема

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

Решение

Решение заключается в использовании CSS3-параметра mask, который позволяет произвольные цвет либо изображение на другое изображение либо на SVG.

Итак, допустим, что у нас есть 3 блока с разными фонами: красным, темно-серым, и текстурным, а также черная png-иконка, размещенная в этих блоках.

HTML:

1
2
3
4
5
6
7
8
9
10
11

<div class="box box-1">
<div class="icon"></div>
</div>
 
<div class="box box-2">
<div class="icon"></div>
</div>
 
<div class="box box-3">
<div class="icon"></div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.box {
width: 33%;
height: 200px;
float: left;
}
 
.box-1 {
background: #cf0000;
}
 
.box-2 {
background: #000;
}
 
.box-3 {
background: url("http://www.texturepalace.com/wp-content/uploads/Wet_Summer_series_Vol_1-01-9.jpg");
}
 
.icon {
    width: 128px;
    height: 128px;
    background: url("https://cdn1.iconfinder.com/data/icons/HTML5/128/HTML_Styling.png");
    margin: 35px auto 0;
}

Окей, предположим, я хочу, чтобы на красном блоке иконка была желтая, на сером — голубая, а на текстурном хочу, чтобы иконка была залита другой текстурой. Для этого в качестве фона для div с классом icon в каждом из блоков поставим нужный фон. А в качестве маски назначим наше изображение иконки. Наш CSS примет следующий вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

.box {
width: 33%;
height: 200px;
float: left;
}
 
.box-1 {
background: #cf0000;
}
 
.box-2 {
background: #000;
}
 
.box-3 {
background: url("http://www.texturepalace.com/wp-content/uploads/Wet_Summer_series_Vol_1-01-9.jpg");
}
 
.icon {
    width: 128px;
    height: 128px;
    -webkit-mask-image: url("https://cdn1.iconfinder.com/data/icons/HTML5/128/HTML_Styling.png");
    mask-image: url("https://cdn1.iconfinder.com/data/icons/HTML5/128/HTML_Styling.png");
    margin: 35px auto 0;
}
 
.box-1 .icon {
background: yellow;
}
 
.box-2 .icon {
background: lightblue;
}
 
.box-3 .icon {
background: url("http://www.texturepalace.com/wp-content/uploads/barge-texture-by-texturepalace-1.jpg");
}

В результате получим следующее:

Подобным образом в качестве маски можно использовать SVG. Кроссбраузерность решения можно узнать здесь.