I'm trying to accomplish this (don't mind the red background)
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>
CSS Syntax Note: To add more than one shadow to the text, add a comma-separated list of 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.
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.
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.
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>
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>
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With