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