CSS - Textschatten mit einem Textumriss kombinieren?

Ich versuche, dies zu tun (ich den roten Hintergrund nichts dagegen) CSS - Textschatten mit einem Textumriss kombinieren?

Also hier ist, was ich habe ich einen Rahmen um den Text zu bekommen, aber dann kann ich es nicht mit einem Text Schatten kombinieren. .. Wie kann ich das umgehen? Vielleicht ist es etwas mit :before :after Aussagen?

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 
    
 

 
    /* 
 
    text-shadow: 0 0 5px #000000; 
 
    
 
    THIS WILL GIVE THE TEXT THE SHADOW*/ 
 
    
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
    /*THIS WILL GIVE THE TEXT THE BORDER*/ 
 
    
 
    /*How can I combine these two?*/ 
 
}

<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

Quelle

2017-12-19 Panic

Vielleicht ist dies eine richtige Antwort https://stackoverflow.com/questions/13287164/css3-text-effect-text-outline-and-shadow-effect – maharr

https://jsfiddle.net/kyxrb4bk /? –

Vielleicht ist diese Lösung, was Sie suchen:

h1 { 
 
    -webkit-text-stroke: 1px black; 
 
    color: white; 
 
    text-shadow: 
 
    3px 3px 5px #000, 
 
    -1px -1px 5px #000, 
 
    1px -1px 5px #000, 
 
    -1px 1px 5px #000, 
 
     1px 1px 5px #000; 
 
}

<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

Quelle

2017-12-19 09:36:04 RasmusGlenvig

einen Blick auf this Geige haben. Sie haben -webkit-Text-Hub verwenden, und dann können Sie den Hub verwenden und separat

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    -webkit-text-stroke: 1px black; 
 
    }

<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

Schatten.

Quelle

2017-12-19 09:37:30

Nicht sicher, ob dies das ist, was Sie suchen, aber nur einen anderen Wert hinzufügen mit X und Y auf -2px gesetzt sollte es tun.

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px -2px 10px black; 
 
}

<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

Beachten Sie, dass in diesem kleinen Skript habe ich -2px -2px 10px black hinzugefügt, die -2pxX ist, der andere ist Y und die letzte, die 10px ist der Schatten zu verbreiten.

Quelle

2017-12-19 09:40:25

Etwas in der Nähe was Sie suchen.

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 
    
 

 
    color: white; 
 
    text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black; 
 
}

<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

Quelle

2017-12-19 09:40:52 Hash

Versuchen Sie dieses für alle im Wert von Browsern abdeckt:

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #fff, 1px -1px 0 #000, -1px 1px 0 #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */ 
 

 
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */ 
 

 
}

<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

Oder

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 

 
    
 
    -webkit-text-stroke-width: 2px; 
 
    -webkit-text-stroke-color: #000; 
 

 

 
}

<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

Quelle

2017-12-19 09:52:41

CSS - Textschatten mit einem Textumriss kombinieren?

Antwort

Verwandte Themen