Text-shadow effect on an html element

Admin 1
Viewed 706

I want to make a similar (or the exact same shadow effect) like this one for my header(background colour may also be white, it doesn't really matter). Only the word 'hello' should have the effect, 'there' should be just as it is:

enter image description here

I tried it with:

 <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                .hello {
                   letter-spacing: 6px;
                   color: white;
                   text-shadow: -2px 0 black, 0 -2px black, 2px 0 black, 0 2px black,
                   2px 2px black, -2px -2px black, -2px 2px black, 2px -2px black,
                   4px 3px blue;
                }
            </style>
            <div class="container">
                <h1><span class="hello">Hello</span> there!</h1>
            </div>
        </div>

But what I get is not that pleasing:

enter image description here

Does anyone know how I can make this work? You may also change the font, I don't mind it!

css html
4 Answers

You can achieve this with using text-stroke (creating the border around the text) and using text-shadow to set the correct offset for the color blue as shadow color.

The color property should be set the same as the background-color property of the surrounding element to get the effect. -webkit-text-stroke is greatly supported (only not in Internet Explorer), read more about it at MDN.

What the properties of text-shadow do:

text-shadow: [horizontal-offset] [vertical-offset] [blur] [color];

Play around with your needs.

.hello {
  -webkit-text-stroke: 0.09375rem #0d1b1e;
  -o-text-stroke: 0.09375rem #0d1b1e;
  text-stroke: 0.09375rem #0d1b1e;
  color: #f2cee6;
  letter-spacing: 6px;
  text-shadow: 5px 5px 0px #2dc7ff;
}

/* For demo purpose only: background-color should match surrounding color for effect */
body {
  font-family: sans-serif;
  font-size: 50px;
  background-color: #f2cee6;
}
<h1><span class="hello">Hello</span> there!</h1>

user_60222430

You can also get closer with only text-shadow like below

.hello {
  color: #f2cee6;
  letter-spacing: 6px;
  text-shadow: 
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    0 0 1.5px #0d1b1e,
    5px 5px 0px #2dc7ff;
}

/* For demo purpose only: background-color should match surrounding color for effect */
body {
  font-family: sans-serif;
  font-size: 50px;
  background-color: #f2cee6;
}
<h1><span class="hello">Hello</span> there!</h1>

related: Outline effect to text in Arabic using CSS

user_86203330

This isn't going to be perfect to what you want as we're dealing with shadows, not SVG paths :D

However, if you use a set of five text shadows, you can achieve this...

.container {
    width: 100%;
    height: 100%;
    background-color: #F2CEE6;
    padding: 0 200px 200px;
}

.hello {
    font-family: sans-serif;
    font-size: 60px;
    letter-spacing: 6px;
    color: #F2CEE6;
    text-shadow: -2px 0px 0px rgba(0, 0, 0, 1),2px 0px 0px rgba(0, 0, 0, 1),0px -2px 0px rgba(0, 0, 0, 1),0px 2px 0px rgba(0, 0, 0, 1),4px 4px 0px rgba(45, 199, 255, 1);
}
<div class="container">
<h1><span class="hello">Hello</span> there!</h1>
</div>

user_755250

This will do something of what you want, but a warning that the text-stroke properties although supported by many browsers, are not an official standard so things might change.

                .container {
                  background-color: pink;
                  font-family: arial, sans-serif;
                  }
                .hello {
                   letter-spacing: 6px;
                   color: pink;
                   text-shadow: 2px 2px cornflowerblue;
                   -webkit-text-stroke-color: black;
                   -webkit-text-stroke-width: 1px;
                }
<div class="container">
   <h1><span class="hello">Hello</span> there!</h1>
</div>

user_108674540
Related