Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS - Combine text shadow with a text outline? [duplicate]

I'm trying to accomplish this (don't mind the red background)enter image description here

So here is what I got I can get a border around the text but then I can't combine it with a text shadow... How can I get around this? Maybe it's something with :before :after statements?

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>
like image 264
Zanic L3 Avatar asked Dec 19 '17 09:12

Zanic L3


People also ask

How do you add multiple text shadows in CSS?

CSS Syntax Note: To add more than one shadow to the text, add a comma-separated list of shadows.

Can you have multiple text shadows?

By using a comma, we can specify multiple text shadows. Here we have created the first text shadow with the same color as th background to give a semi-3D effect.

How do I add a shadow effect to text in CSS?

Answer: Use the CSS text-shadow property You can simply use the CSS text-shadow property to apply the shadow effect (like Photoshop drop-shadow style) on text elements. You can also apply more than one shadow (applied front-to-back) through providing a comma-separated list of shadows.

How do you put an outline on text in CSS?

Sometimes we need to create text and adding the outline to the text. There are mainly two methods to create a border to the fonts which are listed below: Using text-shadow property. Using text-stroke property.


2 Answers

Maybe this solution is what you are looking for:

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>
like image 94
RasmusGlenvig Avatar answered Oct 02 '22 19:10

RasmusGlenvig


have a look at this fiddle. you have to use -webkit-text-stroke and then you can use the stroke and shadow separately

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>

.

like image 28
B.Mauger Avatar answered Oct 02 '22 21:10

B.Mauger