Innerer Text Schatten, blauer Hintergrund, weiße Farbe?

Ich habe eine blaue Box mit Box Schatten und Textfarbe ist weiß, wie folgt: screenshot .Innerer Text Schatten, blauer Hintergrund, weiße Farbe?

Ist es möglich, einen inneren Schatten hinzuzufügen? Wie this (jsfiddle)? Es funktioniert nicht mit Textfarbe weiß, wie in meinem Beispiel.

body { 
 
    /* This has to be same as the text-shadows below */ 
 
    background: #def; 
 
} 
 

 
h1 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 6em; 
 
    line-height: 1em; 
 
} 
 

 
.inset-text { 
 
    /* Shadows are visible under slightly transparent text color */ 
 
    color: rgba(10, 60, 150, 0.8); 
 
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def; 
 
} 
 

 

 
/* Don't show shadows when selecting text */ 
 

 
::-moz-selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
} 
 

 
::selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
}

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

Quelle

2017-08-17 kalterwind

suchen Sie den Text oder das Feld für Abschattung, die sie hält? – Roysh

Shadowing im Text (innerer Schatten, nicht außerhalb des Textes). Plus Schatten außerhalb der Box (aber das ist kein Problem). Der blaue Hintergrund sollte # 277ac0 sein, nicht hellblau wie im Beispiel. – kalterwind

Was ich will und was ich bekomme: http://imgur.com/a/q10rB – kalterwind

Können Sie bitte überprüfen, ob es Ihre Anforderung ist oder nicht?

body { 
    /* This has to be same as the text-shadows below */ 
    background: #006db1; 
} 
h1 { 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 6em; 
    line-height: 1em; 
} 
.inset-text { 
    /* Shadows are visible under slightly transparent text color */ 
    color: rgba(255, 255, 255, 0.8); 
    text-shadow: 1px 4px 6px #555, 0 0 0 #ddd, 1px 4px 6px #000; 
} 
/* Don't show shadows when selecting text */ 
::-moz-selection { background: #fff; color: #000; text-shadow: none; } 
::selection { background: #fff; color: #000; text-shadow: none; }

Quelle

2017-08-17 07:52:07 Abinthaha

Danke, aber nein, es sollte nur einen inneren Schatten geben, keinen äußeren Text .... – kalterwind

In yuor Demo, wenn Sie innerShaow für Ihre weiße Farbe Text möchten.
nur color: rgba(255,255,255, 0.8); dann können Sie den inneren Schatten sehen.

body { 
 
    /* This has to be same as the text-shadows below */ 
 
    background: #277ac0; 
 
} 
 
h1 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 6em; 
 
    line-height: 1em; 
 
} 
 
.inset-text { 
 
    background-color: #565656; 
 
    color: transparent; 
 
    text-shadow: 0px 2px 3px rgba(255,255,255,1); 
 
    -webkit-background-clip: text; 
 
    -moz-background-clip: text; 
 
    background-clip: text; 
 
} 
 
/* Don't show shadows when selecting text */ 
 

 
::-moz-selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
} 
 

 
::selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
}

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

Quelle

2017-08-17 08:17:28 Anami

Entschuldigung, in dieser Demo (nicht von Ich), war der falsche Hintergrund, ich brauche den Hintergrund von meinem Screenshot, es ist dunkler: # 277ac0 - und dann gibt es nur eine graue Farbe im Text, kein Schatten. – kalterwind

@kalterwind Ich bin mir nicht sicher, wie dein "innerer Schatten" aussieht? Könnten Sie mir eine Probe zur Verfügung stellen? – Anami

natürlich, besser Beispiel, was ich will und was ich bekomme: http://imgur.com/a/q10rB – kalterwind

Innerer Text Schatten, blauer Hintergrund, weiße Farbe?

Antwort

Verwandte Themen