Ich spiele gerade mit CSS3 herum und versuche, einen solchen Texteffekt zu erzielen (den schwarzen, verschwommenen inneren Schatten):

Ich kann jedoch keine Möglichkeit finden, Textschatten im Text zu erstellen . Ich frage mich, ob es noch möglich ist, weil das Box-Shadow-Element in der Lage ist, Schatten im Inneren wie folgt zu rendern:

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

Irgendwelche Ideen?

Hier ist ein kleiner Trick, den ich mit den Pseudoelementen :beforeund entdeckt habe :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 }

Das title-Attribut muss mit dem Inhalt übereinstimmen. Demo: http://dabblet.com/gist/1609945

Sie sollten in der Lage sein, dies mit dem Textschatten zu tun, ähm, denken Sie so:

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

Hier ist ein Beispiel: http://jsfiddle.net/ekDNq/

Hier ist mein bester Versuch:

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

Das Problem ist, wie man den Schatten schneidet, der an den Rändern blutet !!! Ich habe es im Webkit mit background-clip: text versucht, aber das Webkit rendert den Schatten über dem Hintergrund, sodass es nicht funktioniert.

Erstellen einer Textmaske mit CSS?

Ohne eine obere Maskenebene ist es unmöglich, einen echten inneren Schatten auf Text zu erzeugen.

Vielleicht sollte jemand dem W3C empfehlen, einen Hintergrundclip hinzuzufügen : umgekehrten Text , der eine Maske durch den Hintergrund schneidet, anstatt den Hintergrund so zu schneiden, dass er in den Text passt.

Entweder das oder den Textschatten als Teil des Hintergrunds rendern und mit Hintergrund-Clip: Text ausschneiden.

Ich habe versucht, ein identisches Textelement absolut darüber zu positionieren, aber das Problem ist der Hintergrundclip: Text schneidet den Hintergrund so ab, dass er in den Text passt, aber wir brauchen das Gegenteil davon.

Ich habe versucht, einen Strich zu verwenden: 20px weiß; sowohl auf diesem als auch auf dem darüber liegenden Element, aber der Textstrich geht sowohl rein als auch raus.

Alternative Methoden

Da es derzeit keine Möglichkeit gibt, eine invertierte Textmaske in CSS zu erstellen, können Sie sich an SVG oder Canvas wenden und ein Textersatzbild mit den drei Ebenen erstellen, um den Effekt zu erzielen.

Da SVG eine Teilmenge von XML ist, kann SVG-Text weiterhin ausgewählt und durchsucht werden, und der Effekt kann mit weniger Code als Canvas erzeugt werden.

Es wäre schwieriger, dies mit Canvas zu erreichen, da es keinen Dom mit Ebenen wie SVG gibt.

Sie können die SVG entweder serverseitig oder als Javascript-Textersetzungsmethode im Browser erstellen.

Weiterführende Literatur:

SVG versus Canvas:

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

Ausschneiden und Maskieren mit SVG-Text:

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

^{Genauere Erklärung des CSS in der Antwort von kendo451 .}

Es gibt noch einen anderen Weg, um eine ausgefallene innere Schattenillusion zu erhalten,
die ich in drei einfachen Schritten erklären werde. Angenommen, wir haben diesen HTML-Code:

<h1>Get this</h1>

und dieses CSS:

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

Schritt 1

Beginnen wir damit, den Text transparent zu machen:

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

Schritt 2

Nun schneiden wir diesen Hintergrund auf die Form des Textes zu:

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

Schritt 3

Nun wird die Magie: wir werden ein verschwommenes setzen text-shadow, die sein wird , vor dem Hintergrund , so dass der Eindruck einer inneren Schatten zu geben!

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

Siehe das Endergebnis .

Nachteile?

• Funktioniert nur in Webkit ( background-clipkann nicht sein text).
• Mehrere Schatten? Denk nicht mal nach.
• Sie erhalten auch ein äußeres Leuchten.

Ein elegantes Beispiel, ohne dass ein positionierter Wrapper oder doppelter Inhalt im Markup erforderlich ist:

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

Sieht auch auf dunklem Hintergrund gut aus:

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

UND ME LINK UND ME2 LINK

Sie können dies irgendwie tun. Leider gibt es keine Möglichkeit, einen Einschub für Textschatten zu verwenden, aber Sie können ihn mit Farbe und Position fälschen. Nehmen Sie die Unschärfe ganz nach unten und ordnen Sie den Schatten oben rechts an. So etwas könnte den Trick machen:

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

... aber Sie müssen wirklich sehr, sehr vorsichtig sein, welche Farben Sie verwenden, sonst sieht es nicht gut aus. Es ist im Wesentlichen eine optische Täuschung und funktioniert daher nicht in jedem Kontext. Bei kleineren Schriftgrößen sieht es auch nicht besonders gut aus. Beachten Sie dies auch.

Es sind keine mehreren Schatten oder ähnliches erforderlich. Sie müssen lediglich Ihren Schatten auf der negativen y-Achse versetzen.

Für dunklen Text auf hellem Hintergrund:

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

Wenn Sie einen dunklen Hintergrund haben, können Sie einfach die Farbe und die y-Position umkehren:

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

Spielen Sie mit den RGBA-Werten, der Deckkraft und der Unschärfe, um den richtigen Effekt zu erzielen. Es hängt stark davon ab, welche Farbschrift und welchen Hintergrund Sie haben. Je schwerer die Schrift, desto besser.

Probieren Sie dieses kleine Juwel einer Variation:

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

Normalerweise nehme ich "es gibt keine Antwort" als Herausforderung

Ich habe viele der vorgeschlagenen Lösungen gesehen, aber keine war genau das, was ich mir erhofft hatte.

Hier ist mein bester Hack, bei dem die Farbe transparent ist, der Hintergrund und der obere Textschatten dieselbe Farbe mit unterschiedlichen Opazitäten haben und die Maske simulieren. Der zweite Textschatten ist eine dunklere, gesättigtere Version der Farbe, die Sie verwenden eigentlich wollen (ziemlich einfach mit HSLA zu tun).

(Übrigens, Text und Styling basierend auf dem OP eines Dupe-Threads )

Ich hatte einige Fälle, in denen ich innere Schatten auf Text brauchte, und Folgendes hat für mich gut funktioniert:

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

Dadurch wird die Deckkraft des Texts auf 80% festgelegt und anschließend zwei Schatten erstellt:

• Der erste ist ein weißer Schatten (vorausgesetzt, der Text befindet sich auf einem weißen Hintergrund), der 1 Pixel von links und 2 Pixel von oben versetzt ist und 3 Pixel unscharf ist.
• Der zweite ist ein schwarzer Schatten, der durch den Text mit einer Deckkraft von 80% sichtbar ist, jedoch nicht durch den ersten Schatten. Dies bedeutet, dass er nur in den Textbuchstaben sichtbar ist, wenn der erste Schatten verschoben ist (1 Pixel von links und 2 Pixel von oben). Um die Unschärfe dieses sichtbaren Schattens zu ändern, ändern Sie den Unschärfeparameter für den Schatten der ersten Ebene.

Vorsichtsmaßnahmen

• Dies funktioniert nur, wenn die gewünschte Farbe des Textes erreicht werden kann, ohne dass die Deckkraft 100% betragen muss.
• Dies funktioniert nur, wenn die Hintergrundfarbe durchgehend ist (daher funktioniert dies nicht für das spezifische Beispiel des Fragestellers, in dem sich der Text auf einem strukturierten Hintergrund befindet).

Hier ist ein Link, der darüber spricht, wie das geht. Es sollte das sein, wonach Sie suchen:

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

Das sieht so aus, als würde es funktionieren: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Er verwendet mehrere Schatten, um diesen Effekt zu erzielen, wie hier erläutert: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Anscheinend hat jeder eine Antwort auf diese Frage. Ich mag die Lösung von @Web_Designer. Aber es muss nicht so komplex sein und Sie können immer noch den verschwommenen inneren Schatten erhalten, den Sie suchen.

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

Dies ist mit Sicherheit das beste Beispiel, das ich je gesehen habe. http://lab.simurai.com/carveme/

Die Quelle ist auf gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

Aufbauend auf der :before :afterTechnik von web_designer kommt hier etwas näher an Ihren Look heran:

Stellen Sie Ihren Text zunächst auf die Farbe des inneren Schattens ein (im Fall des OP schwarz).

Verwenden Sie jetzt eine: after pseudo-Klasse, um ein transparentes Duplikat des Originaltextes zu erstellen, das direkt darüber platziert wird. Weisen Sie ihm einen regulären Textschatten ohne Versatz zu. Weisen Sie dem Schatten die ursprüngliche Textfarbe zu und passen Sie das Alpha nach Bedarf an.

http://dabblet.com/gist/2499892

Sie erhalten keine vollständige Kontrolle über die Ausbreitung usw. des Schattens wie in PS, aber für kleinere Unschärfewerte ist dies durchaus passabel. Der Schatten überschreitet die Grenzen des Textes. Wenn Sie also in einer Umgebung mit einem kontrastreichen Hintergrund-Vordergrund arbeiten, ist dies offensichtlich. Bei Gegenständen mit geringerem Kontrast, insbesondere bei Gegenständen mit demselben Farbton, ist dies nicht allzu auffällig. Zum Beispiel konnte ich mit dieser Technik sehr gut aussehenden geätzten Text in Metallhintergründen erstellen.

Hier ist eine großartige Lösung für TRUE-Textschatten mithilfe der CSS3-Eigenschaft für Hintergrundclips:

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

Folgendes habe ich mir ausgedacht, nachdem ich mir einige der Ideen hier angesehen habe. Die Hauptidee ist, dass die Farbe des Textes mit beiden Schatten verschmilzt. Beachten Sie, dass dies auf einem grauen Hintergrund verwendet wird (andernfalls wird das Weiß nicht gut angezeigt).

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

Versuchen Sie dieses Beispiel für eingefügten Textschatten. Hier ist der HTML-Code

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

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

für Kastenschatten:

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

Sie können Online-Text und Box-Schatten sehen: Online-Text und Box-Schatten

Für mehr Beispiele können Sie zu dieser Adresse gehen: mehr Beispielcode freeclup

Es gibt einen viel einfacheren Weg, dies zu erreichen

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

Voilà

Für normal großen Text auf kleinen Schaltflächen

Ich habe festgestellt, dass die anderen Ideen auf dieser Seite ihre Wirksamkeit verlieren, wenn sie auf kleinen Schaltflächen mit kleiner Textbeschriftung verwendet werden. Diese Antwort erweitert die Antwort von RobertPitt .

Hier ist die kleine Änderung:

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>

Hinweis:

Ich habe diese Seite benutzt, um die Farbtöne zu verfeinern.

Ich benutze es von dieser Seite, auch es sieht gut aus. Schau es dir an Innerer Schatten