Некоторое время назад на нашем блоге публиковалась статья «Удобный способ вёрстки универсальных иконок». Но у данного способа был достаточно серьезный недостаток: он не позволял размещать иконки на фоне произвольного цвета либо текстурном фоне. В этой статье я расскажу о способе, который решает данную проблему.
Проблема
Предположим, что нам нужно использовать одну и ту же иконку в различных местах на сайте или в приложении и при этом они будут отличаться цветом, а фон под иконками будет разный. Обычный способ предполагает создание отдельных изображений-иконок (или, в лучшем случае, спрайтов).
Решение
Решение заключается в использовании 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. Кроссбраузерность решения можно узнать здесь.