CODEWITHSUNDEEP
htmlcsssvg
Marian Rick
Marian Rick

Reputation: 3430

Text with outline and text shadow

I want to create following font style. If not possible I want to be as close to this style as possible. I need to support IE so I cannot use text-stroke.

Text shadow with outline

The closest way I have come is to use multiple text-shadow attributes, for example:

h1 {
   color: #2e536f;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 7em;
   text-transform: uppercase;
   text-shadow:
     -1px -1px 0 #fff,
      1px -1px 0 #fff,
     -1px 1px 0 #fff,
      1px 1px 0 #fff,
     -2px -5px 0px #ff7c7c;
}

body {
    background: #2e536f; 
}
<h1>Zwei</h1>

While it does several tasks, I cannot make the color transparent, to reveal the text shadow behind it.

How can I solve this?

Upvotes: 3

Views: 3640

Answers (2)

web-tiki
web-tiki

Reputation: 103750

If you need to support IE, your best bet is to go for SVG. You can easily give stroke and/or shadow to text to make the exact style you are looking for. This can fit titles but might be a hassle for text that spans several lines though.
Here is your example with an inline SVG:

body {
  background: #2e536f;
}
svg {
  font-weight: bold;
  font-family: sans-serif;
}
<svg viewbox="0 0 10 3">
  <text font-size="3" x="1.5" y="2.5" dx="0" dy="0" fill="#FF7C7C">ZWEI</text>
  <text font-size="3" x="1.5" y="2.5" dx="0.1" dy="0.15" fill="transparent" stroke="#fff" stroke-width="0.08">ZWEI</text>
</svg>

Note that using SVG (even for titles) doesn't impact SEO and google indexes SVG since 2010

Upvotes: 5

Bhavin Shah
Bhavin Shah

Reputation: 2482

body {
    background: #2e536f; 
}

h1 {
   color: #2e536f;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 7em;
   text-transform: uppercase;
   text-shadow:
     -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, 1px 1px 0 #fff, 2px -5px 0px #ff7c7c
}
<h1>Zwei</h1>

Can this be close to your expected output?

Upvotes: 0

Related Questions