CODEWITHSUNDEEP
htmlcss
user14557728
user14557728

Reputation:

Text-shadow effect on an html element

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!

Upvotes: 6

Views: 5032

Answers (4)

Roy
Roy

Reputation: 8069

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>

Upvotes: 6

Temani Afif
Temani Afif

Reputation: 272589

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

Upvotes: 2

A Haworth
A Haworth

Reputation: 36426

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>

Upvotes: 0

Fenton
Fenton

Reputation: 250822

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>

Upvotes: 0

Related Questions