Shady Practices

<div class="shady0">
GOOD AFTERNOON!
</div>

.shady0 {
color: white;
background: lightgrey;
font-size: 3em;
}

GOOD AFTERNOON!

Good afternoon! (It’s afternoon somewhere, at least). I hope you’re having a great day!

Let’s jazz up this dull looking text, and make our greeting a little more fun.

Shadowy text is fun! Here is an example:

.shady1 {
color: white;
background: lightgrey;
font-size: 3em;
text-shadow: red 0px 0px 10px;
}

Will result in the following:

GOOD AFTERNOON!

You can improve the effect by stacking multiple shadows in the same definition:

.shady2 {
color: white;
background: lightgrey;
font-size: 3em;
text-shadow: red 0px 0px 5px, red 0px 0px 10px, red 0px 0px 15px;
}

This gives:

GOOD AFTERNOON!

And, you know what else is fun? Curved text! I find that the best way to define curved text is via embedded svg. This is useful for dynamic text, like the logo legend I created in the template for this blog. If the text is static, you could also wrap this up in an xml tag with the appropriate namespace (xmlns="http://www.w3.org/2000/svg") and save it as a .svg file in your images directory.

<div style="display: block" class="shady-curve0">
  <svg viewBox="0 0 200 70">
      <defs>
        <path id="demo-curve" d="m 15 -25 a 85 85 0 0 0 170 0" />
      </defs>
    <text font-size="20px" text-anchor="middle" stroke="white">
      <textPath startOffset="50%" alignment-baseline="top" xlink:href="#demo-curve"> GOOD AFTERNOON! </textPath>
    </text>
  </svg>
</div>

.shady-curve0 {
color: white;
background: lightgrey;
font-size: 3em;
}

We define an svg canvas to work on, define a path using svg move and arc primitives, and then reference that path in the text element.

This gives:

Hhmm… that’s not quite right. It turns out that svg definitions require you to specify both stroke and fill for text. So:

<div style="display: block" class="shady-curve0">
  <svg viewBox="0 0 200 70">
      <defs>
        <path id="demo-curve" d="m 15 -25 a 85 85 0 0 0 170 0" />
      </defs>
    <text font-size="20px" text-anchor="middle" fill="white" stroke="white">
      <textPath startOffset="50%" alignment-baseline="top" xlink:href="#demo-curve"> GOOD AFTERNOON! </textPath>
    </text>
  </svg>
</div>

Fixes that:

Cool! Now we have a fun message with a jaunty curve. Let’s combine the curve and the shadows:

.shady-curve1 {
color: white;
background: lightgrey;
font-size: 3em;
text-shadow: red 0px 0px 5px, red 0px 0px 10px, red 0px 0px 15px;
}

This gives:

Hhmm… in Safari, that’s still not quite right, and in Firefox it hasn’t even changed a thing (except, if you select the text, in which case it look different again). Cross-browser inconsistencies are still very much a thing. The centre of the svg-generated text is filled with the shadow colour.

It appears that the shadow transformation is only applied to the stroke, and the fill is overwritten. Also, it seems that the shadow is rendered after each letter, which gives a subtle ‘overlapping’ effect (which is actually pretty cool, if that’s what you’re going for, but we’re not).

Luckily, there is an alternative shadow effect that you can apply to the entirety of an image:

.shady-demo-curve {
color: white;
background: lightgrey;
font-size: 3em;
}

.shady-demo-curve svg {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 15px red);
}

Good enough for government work.

See Part 2: Shadow Animation fix

Cover photo by Dominik Leiner on Unsplash