Внутренняя тень текста с помощью CSS

Question

Я сейчас играю с CSS3 и пытаюсь добиться текстового эффекта, подобного этому (черная размытая внутренняя тень):

Но я не могу найти способ создать тени для текста внутри текста. Интересно, возможно ли это по-прежнему, потому что элемент box-shadow способен визуализировать тень внутри так:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

Есть идеи?

Answer 1

Вот небольшой трюк, который я обнаружил, используя псевдоэлементы :before и :after:

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

Атрибут title должен совпадать с содержимым. Демо: http://dabblet.com/gist/1609945

Answer 2

Вы должны быть в состоянии сделать это, используя текстовую тень, ну как-то так:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

вот пример: http://jsfiddle.net/ekDNq/

Answer 3

Вот моя лучшая попытка:

    .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: текст обрезает фон, чтобы поместиться внутри текста, но нам нужно обратное.

Я пытался использовать текстовый штрих: 20 пикселей белый; как на этом элементе, так и на том, что над ним, но текстовый штрих входит и выходит.

Альтернативные методы

Поскольку в CSS в настоящее время нет способа создать маску с перевернутым текстом, вы можете обратиться к SVG или Canvas и сделать текстовое изображение с тремя слоями, чтобы получить эффект.

Поскольку SVG является подмножеством XML, текст SVG по-прежнему будет доступен для выбора и поиска, и эффект может быть получен с меньшим количеством кода, чем Canvas.

Было бы сложнее добиться этого с Canvas, потому что у него нет домика со слоями, как у SVG.

Вы можете создать SVG либо на стороне сервера, либо в качестве метода замены текста JavaScript в браузере.

Дополнительная литература:

SVG против холста:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Обрезка и маскировка с помощью SVG-текста:

http://www.w3.org/TR/SVG/text.html#TextElement

Answer 4

Нет необходимости использовать несколько теней или что-либо подобное, просто нужно сместить тень на отрицательной оси Y.

Для темного текста на светлом фоне:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

Если у вас темный фон, то вы можете просто инвертировать цвет и y-позицию:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

Поиграйте со значениями rgba, непрозрачностью и размытием, чтобы получить правильный эффект.Это будет во многом зависеть от того, какой цвет шрифта и фона у вас есть, и чем весомее шрифт, тем лучше.

Answer 5

^{Более точное объяснение CSS в kendo451 ответе .}

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

<h1>Get this</h1>

и этот CSS:

h1 {
  color: black;
  background-color: #cc8100;
}

Шаг 1

Давайте начнем с того, что сделаем текст прозрачным:

h1 {
  color: transparent;
  background-color: #cc8100;
}

Шаг 2

Теперь мы обрезаем этот фон до формы текста:

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

Шаг 3

Теперь, магия: мы поместим размытое text-shadow, которое будет впереди фона , создавая впечатление внутренней тени!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

См. окончательный результат .

Downsides

• Работает только в Webkit (background-clip не может быть text).
• Несколько теней? Даже не думай.
• Вы тоже получаете внешнее свечение.

Answer 6

Вы можете сделать это. К сожалению, нет возможности использовать вставку для тени текста, но вы можете подделать ее цветом и положением. Возьмите размытие вниз и расположите тень вдоль верхнего правого края. Нечто подобное может сработать:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

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

Answer 7

элегантный пример без необходимости в размещенной обертке или дублирующем содержимом в разметке:

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

Хорошо смотрится и на темном фоне:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

И МЫ ССЫЛКА И ME2 LINK

Answer 8

Попробуйте этот маленький камень вариации:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

Обычно я воспринимаю "нет ответа" как вызов

Answer 9

У меня было несколько случаев, когда мне нужны были внутренние тени на тексте, и мне это помогло:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

Устанавливает непрозрачность текста на 80%, а затем создает две тени:

• Первая - это белая тень (при условии, что текст на белом фоне) смещена на 1 пиксель слева и на 2 пикселя сверху, размыто на 3 пикселя.
• Вторая - это черная тень, которая видна через текст с непрозрачностью 80%, но не через первую тень, что означает, что она видна внутри текстовых букв только там, где смещена первая тень (1 пиксель слева и 2 пикселя сверху ). Чтобы изменить размытие этой видимой тени, измените параметр размытия для тени первого слоя.

Предостережения

• Это будет работать только в том случае, если желаемый цвет текста может быть достигнут без необходимости в непрозрачности 100%.
• Это будет работать только в том случае, если цвет фона сплошной (поэтому он не будет работать для конкретного примера спрашивающего, где текст расположен на текстурированном фоне).

Answer 10

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

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

(кстати, текст и стиль на основе OP-1011 *)