Obecnie bawię się CSS3 i próbuję uzyskać taki efekt tekstowy (czarny rozmyty wewnętrzny cień):

Ale nie mogę znaleźć sposób, aby utworzyć cienie tekstowe wewnątrz tekstu. Zastanawiam się, czy nadal jest to możliwe, ponieważ element box-shadow jest w stanie renderować cień wewnątrz w następujący sposób:

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

Jakieś pomysły?

Oto mały trik odkryłem użyciu :beforei :afterpseudo-elementy:

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

Atrybut tytułu musi być taki sam jak treść. Demo: http://dabblet.com/gist/1609945

Powinieneś być w stanie to zrobić za pomocą cienia tekstu, lub coś takiego:

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

oto przykład: http://jsfiddle.net/ekDNq/

Oto moja najlepsza próba:

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

Problem w tym, jak przyciąć cień, który krwawi na brzegach !!! Próbowałem w webkicie używając background-clip: text, ale webkit renderuje cień nad tłem, więc nie działa.

Tworzenie maski tekstowej za pomocą CSS?

Bez górnej warstwy maskującej niemożliwe jest wykonanie prawdziwego wewnętrznego cienia na tekście.

Być może ktoś powinien zalecić W3C dodanie klipu tła: odwróconego tekstu , który przeciąłby maskę przez tło zamiast wycinać tło, aby dopasować je do tekstu.

Albo wyrenderuj cień tekstu jako część tła i przytnij go za pomocą background-clip: text.

Próbowałem bezwzględnie umieścić nad nim identyczny element tekstowy, ale problemem jest przycięcie tła: tekst przycina tło, aby dopasować się do tekstu, ale potrzebujemy odwrotności tego.

Próbowałem użyć linii tekstu: 20px biała; zarówno na tym elemencie, jak i nad nim, ale obrys tekstu wchodzi i wychodzi.

Metody alternatywne

Ponieważ obecnie nie ma sposobu na utworzenie maski z odwróconym tekstem w CSS, możesz przejść do SVG lub Canvas i zrobić obraz zastępujący tekst z trzema warstwami, aby uzyskać efekt.

Ponieważ SVG jest podzbiorem XML, tekst SVG nadal byłby możliwy do wybrania i przeszukiwania, a efekt można uzyskać przy użyciu mniejszej ilości kodu niż Canvas.

Byłoby to trudniejsze do osiągnięcia w przypadku Canvas, ponieważ nie ma domeny z warstwami, jak ma to miejsce w SVG.

Możesz utworzyć SVG po stronie serwera lub jako metodę zastępowania tekstu javascript w przeglądarce.

Dalsze czytanie:

SVG a Canvas:

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

Przycinanie i maskowanie za pomocą tekstu SVG:

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

^{Bardziej precyzyjne wyjaśnienie CSS w odpowiedzi kendo451 .}

Jest inny sposób na uzyskanie wymyślnej iluzji wewnętrznego cienia,
którą wyjaśnię w trzech prostych krokach. Powiedzmy, że mamy ten HTML:

<h1>Get this</h1>

i ten CSS:

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

Krok 1

Zacznijmy od uczynienia tekstu przezroczystym:

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

Krok 2

Teraz przycinamy to tło do kształtu tekstu:

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

Krok 3

A teraz magia: umieścimy rozmazany obraz text-shadow, który będzie przed tłem , dając w ten sposób wrażenie wewnętrznego cienia!

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

Zobacz efekt końcowy .

Wady?

• Działa tylko w Webkit ( background-clipnie może być text).
• Wiele cieni? Nawet nie myśl.
• Otrzymujesz też zewnętrzny blask.

Eleganckim przykładem bez konieczności korzystania z umieszczonym opakowaniu jednostkowym lub powielania treści w znacznikach:

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

Wygląda dobrze również na ciemnym tle:

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

I ME LINK I ME2 LINK

Możesz to zrobić. Niestety nie ma sposobu, aby użyć wstawki na cieniu tekstu, ale można ją sfałszować kolorem i pozycją. Zmniejsz rozmycie i ułóż cień w prawym górnym rogu. Coś takiego może załatwić sprawę:

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

... ale musisz bardzo, bardzo uważać na to, jakich kolorów użyjesz, w przeciwnym razie będzie wyglądać inaczej. Zasadniczo jest to złudzenie optyczne, więc nie będzie działać w każdym kontekście. Nie wygląda też świetnie przy mniejszych rozmiarach czcionek, więc pamiętaj o tym.

Nie ma potrzeby stosowania wielu cieni ani niczego podobnego, wystarczy zrównoważyć cień na ujemnej osi Y.

Ciemny tekst na jasnym tle:

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

Jeśli masz ciemne tło, możesz po prostu odwrócić kolor i pozycję y:

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

Baw się wartościami rgba, kryciem i rozmyciem, aby uzyskać odpowiedni efekt. Będzie to w dużej mierze zależało od posiadanej czcionki i tła, a im grubsza czcionka, tym lepiej.

Wypróbuj ten mały klejnot wariacji:

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

Zwykle traktuję „brak odpowiedzi” jako wyzwanie

Widziałem wiele z proponowanych rozwiązań, ale żadne nie spełniło moich oczekiwań.

Oto moja najlepsza sztuczka w tym przypadku, gdy kolor jest przezroczysty, tło i górny cień tekstu są tego samego koloru z różnymi przezroczystościami, symulując maskę, a drugi cień tekstu to ciemniejsza, bardziej nasycona wersja koloru faktycznie chcesz (całkiem łatwe do zrobienia z HSLA).

(przy okazji, tekst i stylizacja oparta na OP wątku podwójnego )

Miałem kilka przypadków, w których potrzebowałem wewnętrznych cieni w tekście, a następujące elementy dobrze mi się sprawdziły:

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

To ustawia krycie tekstu na 80%, a następnie tworzy dwa cienie:

• Pierwszy to biały cień (zakładając, że tekst jest na białym tle) przesunięty o 1 piksel od lewej i 2 piksele od góry, rozmyty 3 piksele.
• Drugi to czarny cień, który jest widoczny przez tekst nieprzezroczystości 80%, ale nie przez pierwszy cień, co oznacza, że ​​jest widoczny wewnątrz liter tekstu tylko wtedy, gdy pierwszy cień jest przesunięty (1 piksel od lewej i 2 piksele od góry). Aby zmienić rozmycie tego widocznego cienia, zmodyfikuj parametr rozmycia dla cienia pierwszej warstwy.

Ostrzeżenia

• To zadziała tylko wtedy, gdy pożądany kolor tekstu można osiągnąć bez konieczności 100% krycia.
• To zadziała tylko wtedy, gdy kolor tła jest jednolity (więc nie będzie działać dla konkretnego przykładu pytającego, w którym tekst znajduje się na teksturowanym tle).

Oto link mówiący o tym, jak to zrobić, powinno to być to, czego szukasz:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Wygląda na to, że to działa: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Używa wielu cieni, aby osiągnąć ten efekt, jak wyjaśniono tutaj: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Wygląda na to, że każdy ma na to odpowiedź. Podoba mi się rozwiązanie od @Web_Designer. Ale nie musi to być tak skomplikowane i nadal możesz uzyskać rozmyty wewnętrzny cień, którego szukasz.

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

To z pewnością najlepszy przykład, jaki widziałem. http://lab.simurai.com/carveme/

Źródło znajduje się na gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

Opierając się na :before :aftertechnice web_designer, oto coś, co zbliża się do Twojego wyglądu:

Najpierw nadaj tekstowi kolor wewnętrznego cienia (czarny w przypadku OP).

Teraz użyj klasy: after psuedo, aby utworzyć przezroczystą kopię oryginalnego tekstu, umieszczoną bezpośrednio na nim. Przypisz do niego zwykły cień tekstu bez przesunięcia. Przypisz oryginalny kolor tekstu do cienia i dostosuj współczynnik alfa według potrzeb.

http://dabblet.com/gist/2499892

Nie masz pełnej kontroli nad rozproszeniem itp. Cienia, tak jak w PS, ale przy mniejszych wartościach rozmycia jest to całkiem znośne. Cień wychodzi poza granice tekstu, więc jeśli pracujesz w środowisku z wysokim kontrastem tła i pierwszego planu, będzie to oczywiste. W przypadku przedmiotów o niższym kontraście, szczególnie tych o tym samym odcieniu, nie jest to zbyt zauważalne. Na przykład za pomocą tej techniki udało mi się stworzyć bardzo ładnie wyglądający wytrawiony tekst na metalowym tle.

Oto świetne rozwiązanie dla TRUE wstawionego cienia tekstu przy użyciu właściwości 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;
}

Oto, co wymyśliłem po przyjrzeniu się niektórym pomysłom tutaj. Główną ideą jest to, że kolor tekstu łączy się z obydwoma cieniami i zwróć uwagę, że jest on używany na szarym tle (w przeciwnym razie biały nie będzie dobrze widoczny).

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

Wypróbuj ten przykład dla wstawienia cienia tekstu. Oto kod HTML

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

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

dla cienia skrzynki:

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

można zobaczyć tekst online i cień ramki: tekst online i cień ramki

na przykład możesz przejść do tego adresu: więcej przykładowego kodu freeclup

Jest na to znacznie prostszy sposób

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

Voilà

Dla tekstu o normalnym rozmiarze na małych przyciskach

Odkryłem, że inne pomysły na tej stronie tracą skuteczność, gdy są stosowane na małych przyciskach z małym napisem. Ta odpowiedź rozszerza odpowiedź Roberta Pitta .

Oto drobne poprawki:

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>

Uwaga:

Użyłem tej strony do finezji odcieni kolorów.

Używam go z tej strony, również wygląda dobrze. Spójrz na to Wewnętrzny cień