CSS Текст со штриховкой или -webkit-mask приходит на помощь

На этой неделе передо мной встала задача по верстке макета, в который дизайнеры заботливо поместили текст со штриховкой. Фрагмент этого макета вы можете видеть на картинке чуть ниже по тексту. Сверстать макет необходимо было под iPad, а это значит, что в достижении поставленной задачи можно использовать всю мощь движка Webkit, который лежит в основе браузера Mobile Safari в iPad.

Текст со штриховкой или -webkit-mask

Беглый осмотр списка всех возможных css-свойств привел к тому, что было найдено свойство -webkit-mask, которое, в итоге, и помогло в этой затруднительной ситуации.

Задача по заданию тексту неоднородного цвета уже неоднократно описывалась на просторах интернета. При этом чаще всего в статьях приводятся практические примеры по заданию градиента для текста. Например, в статье на сайте Web Designer Wall приводится пример по заданию цвета градиента путем наложения поверх блока с текстом полупрозрачной картинки в формате png. Все бы хорошо, но такая методика будет работать только если под текстом у нас находится фон однородного цвета, и мы накладываем поверх этого фона полупрозрачную картинку с таким же оттенком цвета. В моем случае макет имеет неоднородный фон, поэтому нужно было нестандартное и не вполне очевидное решение… Вариант с заменой текста на обычную png-картинку был исключен почти сразу, так как была вероятность, что цифры в этом блоке нужно будет динамически изменять.

Как я уже упомянул выше, решение было найдено с помощью специального css-свойства -webkit-mask. Оно поддерживается браузерами Chrome 3+, Safari 4+, а также прочими браузерами на движке Webkit, включая мобильные версии браузеров. Его суть заключается в том, что оно задает маску, которая применяется для скрытия некоторых частей элемента. В качестве маски может быть использовано любое изображение, причем прозрачные части маски делают элемент невидимым, непрозрачные — видимым, а полупрозрачные — полупрозрачными в зависимости от прозрачности маски.

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

Как видно из рисунка, маска имеет размер 4х4 пикселя, у нее белая заливка, и по ее диагонали расположен блок из прозрачных пикселей.

Таким образом, верстка блока будет выглядеть примерно так:

<div class="b-counter">
    <span class="b-counter-back">
        256
        <span class="b-counter-front">256</span>
    </span>
</div>

Расположим блоки с текстом друг под другом и зададим им нужные цвета и маску:

.b-counter {
    font-size:5em;
    font-weight:bold;
    text-align:center;
}
.b-counter-back {
    display:block;
    position:relative;
    color:#c3230e;
}
.b-counter-front {
    width:100%;
    top:0;
    left:0;
    position:absolute;
    color:#ff6b6b;
    -webkit-mask:repeat url(text-with-hatching-or-webkit-mask-mask.png);
}

Так легко и просто в webkit-браузерах можно добиться точного совпадения с макетом, нарисованным дизайнером. В остальных брузерах мы увидим текст светло-красного цвета без штриховки, что вполне допустимо. Вполне возможно, что в ближайшем будущем браузеры Firefox и Opera будут поддерживать аналогичные css-свойства -moz-mask и -o-mask, так что текст с подобной штриховкой сможет корректно отображаться и в них.

Пример работы -webkit-mask можно посмотреть на отдельной странице или в этом iframe-блоке:

P.S. Вы можете кликнуть по тексту во фрейме, чтобы динамически его изменить.