Вот моя лучшая попытка:
.inner_shadow {
color:transparent;
background-color:white;
text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
font-family:'ProclamateHeavy'; // Or whatever floats your boat
font-size:150px;
}
<span class="inner_shadow">Inner Shadow</span>
Проблема в том, как обрезать тени, которые растекаются по краям !!! Я пробовал использовать webkit, используя background-clip: text, но webkit отображает тень над фоном, поэтому это не работает.
Создание текстовой маски с помощью CSS?
Без верхнего слоя маски невозможно создать настоящую внутреннюю тень на тексте.
Возможно, кому-то стоит порекомендовать W3C добавить background-clip: reverse-text , который прорезал бы маску через фон вместо того, чтобы вырезать фон, чтобы поместиться внутри текста.
Либо это, либо визуализируйте тень текста как часть фона и закрепите ее с помощью background-clip: text.
Я попытался абсолютно позиционировать идентичный текстовый элемент над ним, но проблема в background-clip: текст обрезает фон, чтобы он поместился внутри текста, но нам нужно обратное.
Я пробовал использовать text-stroke: 20px white; как для этого элемента, так и для элемента над ним, но обводка текста идет как внутрь, так и наружу.
Альтернативные методы
Поскольку в настоящее время нет возможности создать маску инвертированного текста в CSS, вы можете обратиться к SVG или Canvas и создать изображение для замены текста с тремя слоями, чтобы получить свой эффект.
Поскольку SVG является подмножеством XML, текст SVG по-прежнему будет доступен для выбора и поиска, и эффект может быть достигнут с меньшим количеством кода, чем Canvas.
Было бы труднее добиться этого с помощью Canvas, потому что у него нет dom со слоями, как у SVG.
Вы можете создать SVG либо на стороне сервера, либо как метод замены текста javascript в браузере.
Дальнейшее чтение:
SVG против Canvas:
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Обрезка и маскирование с текстом SVG:
http://www.w3.org/TR/SVG/text.html#TextElement
