Wewnętrzny cień tekstu z CSS

107

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?

ericteubert
źródło
3
Nie ma na to odpowiedzi, jeśli nie jesteś przygotowany na iluzje optyczne ...
Aaria Carter-Weir

Odpowiedzi:

105

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

Projektant stron internetowych
źródło
1
Miły! Kreatywny :) Nadal nie jest tak Photoshopowy, jak bym chciał. Możesz ustawić górne / lewe wartości na 5 pikseli, aby uzyskać wewnętrzne przesunięcie cienia o 5 pikseli, ale potem litera wycieka z drugiego końca - co wygląda świetnie dla 1 piks. I 2 piks., Ale dziwnie dla wyższych wartości.
ericteubert
1
Tak, wygląda dobrze tylko z lekką nutą bieli na spodzie. Każde więcej niż 2 piksele niszczy wygląd.
Web_Designer,
1
Niesamowite! Możesz użyć tego do tworzenia białego tekstu, zwiększając krycie do 0,9 lub tworząc fazowane krawędzie, utrzymując krycie na poziomie 0,1 i odwracając kolory. (+1)
JohnB
Świetne rozwiązanie. Jednak nie w połączeniu z fe gradientów tekstowych, (szkoda Chyba będziemy musieli czekać na CSS4 przez kilka lat lub tak dla wielkich efektów tekstowych..
Michael Trouw
To fajne w Chrome, staram się zrobić alternatywną rezerwę dla FF, która nie będzie miała zastosowania do Chrome bez użycia JS i klasy przestrzeni nazw. Jakieś pomysły. PS Działa pięknie na skórzanym efekcie bg, wygląda jak stempel marki.
Will Hancock,
43

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/

RobertPitt
źródło
8
Hum, tak, trochę. Efekt wizualny jest podobny z tymi parametrami, ale nadal jest to cień za czcionką. Nie w środku. W moim przykładzie rozmywam nawet wstawiony cień, a to zniweczy tutaj efekt. A więc ... jak dotąd najlepsze rozwiązanie, ale wciąż tylko wizualna iluzja;)
ericteubert
2
Zwróć uwagę, że robiąc to, zwiększasz grubość czcionki. W przypadku małych i średnich czcionek może to nie być pożądane.
Jonatan Littke
20

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

kendo451
źródło
2
Opublikowałem bardziej szczegółowe wyjaśnienie, jak najlepiej się starałeś, wraz z przykładem. Sprawdź to!
Alba Mendez
1
Przykład tego doprowadzony do skrajności .
Alba Mendez,
W twoim przykładzie jest cień zewnętrzny
AlexKh
12

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

To dobry slogan

Krok 1

Zacznijmy od uczynienia tekstu przezroczystym:

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

To pudełko

Krok 2

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

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

Tło to tekst!

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

Mamy to!  Yay!

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.
Alba Mendez
źródło
- Wiele cieni? Nawet nie myśl. O co chodzi text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;?
Morfeusz
@Morpheus Jedną z wad tej metody jest to, że nie można zastosować wielu cieni do tekstu.
Alba Mendez
Rozmiar i jasność tego przykładu utrudniają oglądanie innych. Czy mógłbyś przenieść je do fragmentów kodu? Dzięki!
Josh Habdas
12

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

Zombyii
źródło
Prosty i nie wymaga żadnych korekt znaczników. Świetna robota!
Josh Habdas
10

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.

holsk
źródło
Nie do końca to, czego szukam. Efekt twojej propozycji jest interesujący, ale daleki od przykładu, który zamieściłem.
ericteubert
Wtedy w takim przypadku nie ma odpowiedzi, nie z CSS3. Przepraszam, nie mogłem pomóc.
hollsk
Wstawione cienie są możliwe przy użyciu, background-clipjak pokazano w tej odpowiedzi .
Josh Habdas
10

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.

Dylan
źródło
3
Wciąż tylko złudzenie optyczne, bez prawdziwego wewnętrznego cienia.
ericteubert
25
... czy nie wszystkie cienie są złudzeniem optycznym?
Charlie Schliesser
jesteś zrzędliwy @eteubert ... naprawdę wredny
Jamie Hutber
7

Wypróbuj ten mały klejnot wariacji:

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

Zwykle traktuję „brak odpowiedzi” jako wyzwanie

Mikrofon
źródło
1
Tworzy to biały kontur na dole czcionki, ale szukałem czarnego, rozmytego wewnętrznego cienia .
ericteubert
1
To działało najlepiej dla mnie, zwłaszcza podczas cieniowania mniejszego tekstu. W razie potrzeby proponuję nieco poprawić wartości RGB, aby wyglądały dobrze z kolorem czcionki.
Cory Schires
6

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

wprowadź opis obrazu tutaj

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

esjay
źródło
6

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).
Nick Coons
źródło
4

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);
}
orzechówka
źródło
3

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.

harkyman
źródło
3

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;
}
Aaron
źródło
Wygląda na to, że ten link jest teraz uszkodzony.
Nick White,
Ładnie wygląda w pakiecie internetowym, ale nadal nie
nadaje
To może mieć ograniczone wsparcie, ale uwielbiam ten, ponieważ jest naprawdę wstawiony.
Julian K,
2

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);
}
Nick White
źródło
1

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

Prakash Upadhyay
źródło
0
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

MAG TOR
źródło
0

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à

Warface
źródło
0

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;

Uwaga:

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

cssyphus
źródło
-1

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

vkGunasekaran
źródło
1
Osoba, która przegłosowała to, może powiedzieć, w jaki sposób kwalifikuje się do głosowania przeciw. Czy ta odpowiedź odbiegała od pytania? lub myślisz, że jestem spamerem ... jeśli możesz wyjaśnić, mogę zaktualizować moją odpowiedź tutaj
vkGunasekaran
+1 Ta sama odpowiedź co Web_Designer, ale lepiej wyjaśniona. Może przeciwnik nie podobał się fakt, że Twoja odpowiedź była w zasadzie taka sama, jak odpowiedź opublikowana wcześniej. Ale proszę bardzo. Właśnie to wynagrodziłem :)
Jules Colle
2
Po prostu przegłosowano. Nie tylko jest to duplikat, ale nie wyjaśnia problemu ani nie podaje żadnych fragmentów, to tylko link. Moim zdaniem pokazuje to minimalny wysiłek autora. IMHO i FTR.
Alba Mendez