В настоящее время я играю с CSS3 и пытаюсь добиться такого эффекта текста (черная размытая внутренняя тень):
Но я не могу найти способ создать тени текста внутри текста. Интересно, возможно ли это по-прежнему, потому что элемент box-shadow способен визуализировать тень внутри так:
box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
Есть идеи?
Вот небольшой трюк, который я обнаружил с использованием псевдоэлементов :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
Вы должны быть в состоянии сделать это, используя text-shadow, erm sometink следующим образом:
.inner_text_shadow
{
text-shadow: 1px 1px white, -1px -1px #444;
}
вот пример: http://jsfiddle.net/ekDNq/
Вот моя лучшая попытка:
.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>
Нет необходимости в нескольких тенях или что-то вроде этого, вам просто нужно компенсировать тень на отрицательной оси y.
Для темного текста на светлом фоне:
text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);
Если у вас темный фон, вы можете просто инвертировать цвет и позицию y:
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
Играйте со значениями rgba, непрозрачностью и размытием, чтобы получить эффект в самый раз. Это будет сильно зависеть от того, какой цвет шрифта и фона у вас есть, и более тяжелый шрифт, тем лучше.
Вы можете это сделать. К сожалению, нет способа использовать вставку в текстовой тени, но вы можете подделать ее цветом и положением. Возьмите размытие прямо вниз и уложите тень вверху справа. Что-то вроде этого может сделать трюк:
background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;
... но вам нужно быть действительно, очень осторожно, какие цвета вы используете, иначе он будет оторваться. Это, по сути, оптическая иллюзия, поэтому не будет работать в каждом контексте. Это также не очень хорошо смотрится при меньших размерах шрифтов, поэтому имейте это в виду.
Более точное объяснение CSS в ответе kendo451.
Есть еще один способ получить иллюзорную иллюзию внутренней теневой тени,
которые я объясню в три простых шага. Скажем, у нас есть этот HTML:
<h1>Get this</h1>
и этот CSS:
h1 {
color: black;
background-color: #cc8100;
}
Начните с прозрачного текста:
h1 {
color: transparent;
background-color: #cc8100;
}
Теперь мы обрезаем этот фон в форме текста:
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
}
Теперь, волшебство: мы поместим размытый text-shadow, который будет впереди
фона, создавая впечатление внутренней тени!
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
text-shadow: 0px 2px 5px #f9c800;
}
background-clip не может быть text).Попробуйте эту маленькую жемчужину вариации:
text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);
Я обычно принимаю "нет ответа" как вызов
Я видел много предлагаемых решений, но никто из них не был тем, чего я надеялся.
Здесь мой лучший хак в этом, где цвет прозрачен, фон и верхняя тень-тень одного цвета с изменяющимися непрозрачность, имитация маски, а вторая текстовая тень - более темная, насыщенная версия цвета, который вы действительно хотите (довольно легко сделать с HSLA).
(btw, текст и стиль, основанный на обходной поток OP)
У меня было несколько случаев, когда мне нужны были внутренние тени в тексте, и для меня это получилось хорошо:
.inner {
color: rgba(252, 195, 67, 0.8);
font-size: 48px;
text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}
Это устанавливает непрозрачность текста до 80%, а затем создает две тени:
Предостережение
Элегантный пример без необходимости позиционированной обертки или дублирующего содержимого в разметке:
: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>Вот ссылка, говорящая о том, как это сделать, это должно быть то, что вы ищете:
http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/
Похоже, это работает: http://tips4php.net/2010/08/nice-css-text-shadow-effects/
Он использовал несколько теней для достижения этого эффекта, как описано здесь: http://www.w3.org/Style/Examples/007/text-shadow#multiple
Кажется, каждый получил ответ на этот вопрос. Мне нравится решение от @Web_Designer. Но это не обязательно должно быть таким сложным, что вы можете получить размытую внутреннюю тень, которую вы ищете.
http://dabblet.com/gist/3877605
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before {
content: attr(title);
color: transparent;
position: absolute;
text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}
Это самый лучший пример, который я видел. http://lab.simurai.com/carveme/
Источник находится на gitthub https://github.com/simurai/lab/tree/gh-pages/carveme
Основываясь на методе :before :after от web_designer, вот что подходит вам ближе:
Во-первых, сделайте свой текст цветом внутренней тени (черно-белый в случае OP).
Теперь, используйте следующий класс: после класса psuedo, чтобы создать прозрачный дубликат исходного текста, размещенного непосредственно поверх него. Назначьте регулярную тень текста без смещения. Назначьте исходный цвет текста тени и отрегулируйте альфа по мере необходимости.
http://dabblet.com/gist/2499892
Вы не получаете полный контроль над спредом и т.д. тени, как в PS, но для меньших значений размытости это довольно сносно. Тень проходит через границы текста, поэтому, если вы работаете в среде с высоким контрастом на переднем плане, это будет очевидно. Для более контрастных предметов, особенно с тем же оттенком, это не слишком заметно. Например, я смог сделать очень красивый выгравированный текст в металлических фонах, используя эту технику.
Здесь отличное решение для теневой теневой тени TRUE с использованием свойства CSS3 background-clip:
.insetText {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
Вот что я придумал, посмотрев на некоторые идеи здесь. Основная идея заключается в том, что цвет текста смешивается с обоими тенями, и обратите внимание, что это используется на сером фоне (иначе белый цвет не будет хорошо отображаться).
.inset {
color: rgba(0,0,0, 0.6);
text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}
Попробуйте этот пример для тени ввода вставки. Здесь HTML
<h1 class="inset-text-shadow">Inset text shadow trick</h1>
и CSS
body {
background: #f8f8f8;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text-shadow {
/* Shadows are visible under slightly transparent text color */
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
для тени окна:
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
вы можете видеть онлайн-текст и тень окна: онлайн-текст и тень окна
Для примера, вы можете перейти по этому адресу: еще пример freeclup кода
Там гораздо более простой способ достичь этого
.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow
Вуаля
Я использую его с этого сайта, также он выглядит хорошо. Посмотрите на него Внутренняя тень