Можно ли с помощью CSS сделать прозрачный шрифт на цветном фоне так, чтобы на фоне оставались «вырезы» от букв?

Question

[bmforce]

Можно ли с помощью CSS сделать прозрачный шрифт на цветном фоне так, чтобы на фоне оставались "вырезы" от букв? Обязательно, чтобы решение было кроссбраузерным, и желательно без использования изображений.

Заранее спасибо.

Comments

[keslo]

Что подразумевается под "вырезы" от букв?

[bmforce]

Если у шрифта, например, с зелёным фоном, установить полную прозрачность самого шрифта, но не фона, то на выходе мы получим просто зелёный квадрат. Мне же была необходимость, чтобы в местах расположения символов получались прозрачные области.
Правда, как оказалось, для решения моей задачи меня вполне устраивает вариант предложенный hostgame.

Answer 1

[hostgame]

Возможно поможет
tympanus.net/codrops/2013/12/02/techniques-for-cre...

Comments

[bmforce]

Большое спасибо! Для того, что я хотел сделать, меня вполне устроил первый вариант с canvas.

Answer 2

[Denis Isaychenko]

Делаем у текста:

color: transparent;
-webkit-text-stroke: 1px white;
text-stroke: 1px white;

cdpn.io/dbrqa
Поддержка caniuse.com/text-stroke

Comments

[seoave]

спасибо!

[Brendan Castaneda]

Спасибо!

Answer 3

[Вадим Яковлев]

Единственным вариантом мне кажется использование изображений с trasparency, в качестве букв,
Но то, о чем вы говорите, скорее всего можно сделать через canvas, но это будет не очень кроссбраузерно я думаю.