В даний час я граю з CSS3 і намагаюся домогтися такого тексту тексту (чорна розмита внутрішня тінь):

Але я не можу знайти спосіб створити текстові тіні всередині тексту. Цікаво, чи все-таки це можливо, тому що елемент-тінь для коробки здатний надати тінь всередині так:

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 }

Атрибут заголовка повинен відповідати вмісту. Демонстрація: http://dabblet.com/gist/1609945

Ви повинні бути в змозі зробити це за допомогою тексту-тіні, erm що-небудь подумайте так:

.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>
   

Проблема в тому, як обрізати тінь, що кровоточить по краях !!! Я спробував у webkit використовуючи background-clip: text, але webkit робить тінь над фоном, щоб він не працював.

Створення текстової маски за допомогою CSS?

Без верхнього шару маски неможливо зробити справжню внутрішню тінь на тексті.

Можливо, хтось повинен порекомендувати W3C додати background-clip: reverse-text , який би вирізав маску через фон замість того, щоб вирізати фон, щоб він вмістився всередині тексту.

Або це, або візьміть текст-тінь як частину фону та обріжте його фоном-кліпом: текст.

Я спробував абсолютно розташувати ідентичний текстовий елемент над ним, але проблема полягає в фоновому кліпі: текст обрізає фон, щоб він помістився всередині тексту, але нам потрібен зворотній бік.

Я спробував використовувати обведення тексту: 20px білий; як на цьому елементі, так і на тій, що знаходиться над ним, але обведення тексту йде як у, так і поза.

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

Оскільки в даний час немає можливості зробити маску із перевернутим текстом у CSS, ви можете звернутися до SVG чи Canvas та зробити зображення заміни тексту трьома шарами, щоб отримати ефект.

Оскільки SVG є підмножиною XML, текст SVG все ще може бути доступним для пошуку та пошуку, і ефект може бути створений з меншим кодом, ніж Canvas.

Це було б важче досягти Canvas, оскільки він не має купола з шарами, як 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

^{Більш точне пояснення 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;
}

Дивіться кінцевий результат .

Недоліки?

• Працює лише у Webkit ( background-clipне може бути text).
• Кілька тіней? Навіть не думай.
• Ви також отримуєте зовнішнє сяйво.

Елегантний приклад без необхідності позіційованої обгортки або дублюючого контенту в розмітці:

: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>

І МИ ЛІНКА І МЕ2 ПОСИЛАННЯ

Ви можете це зробити. На жаль, немає можливості використовувати вставки на текстовій тіні, але ви можете підробити це кольором і положенням. Візьміть розмиття прямо вниз і розташуйте тінь уздовж праворуч угорі. Щось подібне може зробити трюк:

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

... але вам потрібно бути дуже, дуже обережними, які кольори ви використовуєте, інакше це буде виглядати. По суті це оптична ілюзія, тому не буде працювати в будь-якому контексті. Він також не дуже добре виглядає при менших розмірах шрифту, тому пам’ятайте і про це.

Немає необхідності в декількох тінях або в чомусь подібному фантазії, вам потрібно просто змістити свою тінь на негативній осі y.

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

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

Якщо у вас темний фон, тоді ви можете просто перевернути колір і y-положення:

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

Пограйте зі значеннями rgba, непрозорістю та розмитістю, щоб отримати ефект як раз. Від цього буде багато що залежати від того, який кольоровий шрифт і фон у вас є, і чим вагоміший шрифт, тим краще.

Спробуйте цей маленький самоцвіт варіації:

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

Зазвичай я сприймаю "немає відповіді" як виклик

Я бачив багато запропонованих рішень, але жодне було не те, на що я сподівався.

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

(btw, текст та стилізація, заснована на оперізованій нитці )

У мене було кілька випадків, коли мені потрібні були внутрішні тіні над текстом, і наступне мені добре спрацювало:

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

Це встановлює непрозорість тексту на 80%, а потім створює два тіні:

• Перший - біла тінь (якщо припустити, що текст знаходиться на білому тлі) зміщення 1 px зліва і 2px зверху, розмитість 3px.
• Друга - це чорна тінь, яка видно через непрозорість тексту на 80%, але не через першу тінь, а це означає, що вона видно всередині текстових літер лише там, де перша тінь зміщена (1 px зліва та 2px зверху). Щоб змінити розмиття цієї видимої тіні, змініть параметр розмиття для тіні першого шару.

Коваджі

• Це спрацює лише в тому випадку, якщо бажаний колір тексту може бути досягнутий без його непрозорості.
• Це працюватиме лише в тому випадку, якщо колір фону є твердим (значить, він не працюватиме на конкретному прикладі запитувача, коли текст сидить на текстурованому фоні).

Ось посилання про те, як це зробити, це має бути те, що ви шукаєте:

http://sixreitions.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, ось щось, що наближається до вашого вигляду:

По-перше, зробіть текст кольором внутрішньої тіні (чорний іш у випадку з ОП).

Тепер використовуйте: після класу psuedo, щоб створити прозорий дублікат оригінального тексту, розміщеного безпосередньо над ним. Призначте їй звичайну текстову тінь без зміщення. Призначте початковий колір тексту тіні та відрегулюйте альфа за потребою.

http://dabblet.com/gist/2499892

Ви не отримуєте повного контролю над поширенням і т. Д. Тіні, як і в PS, але для менших значень розмитості це досить прохідно. Тінь проходить за межі тексту, тож якщо ви працюєте в середовищі з високим контрастним фоном переднього плану, це буде очевидно. Для предметів із нижчим контрастом, особливо тих, що мають однаковий відтінок, це не надто помітно. Наприклад, мені вдалося зробити дуже приємний вигляд офортного тексту в металевих фонах за допомогою цієї техніки.

Ось чудове рішення для TRUE вставки тексту тексту за допомогою властивості background-clip CSS3:

.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);

}

Demo on Jsfiddle

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

Voilà

Для тексту у звичайному розмірі на кнопках з невеликим розміром

На цій сторінці я знайшов інші ідеї, щоб втратити свою ефективність при використанні на маленьких кнопках з маленькими текстовими літерами. Ця відповідь поширюється на відповідь Роберта Пітта .

Ось незначна настройка:

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

Примітка:

Я використовував цей сайт для витончення кольорових відтінків.

Я використовую його з цього сайту, також він добре виглядає. Погляньте на це Внутрішня тінь