0

I'm trying to create a highlight effect for a headline using css, see css-tricks article for background.

Here's a stackoverflow question that has solutions that work in the browser using box-shadow declaration, but email clients like Gmail don't support a lot of the newer CSS3 features.

Is there a workaround for doing CSS-based text highlighting that works and can be used in email templates?

Community
  • 1
  • 1
Myk Klemme
  • 540
  • 1
  • 4
  • 15

2 Answers2

2

When working with HTML email, you have to go really old-fashioned with your code. I don't think you can give a block of inline text a background color, but you can give a box like a table cell a background color fairly reliably.

The following text is highlighted: <table><tr><td bgcolor="eeff00">Highlighted Text</td></tr></table>

This probably won't even be highlighted in email clients: <span style="background-color: #eeff00">Highlighted Text</span>
omnichad
  • 1,635
  • 1
  • 11
  • 10
1

An old trick could be using double texts (adjust the shadow color to fit your requirements).

Updated, with opacity, which might work and will give it even more "shadow-ish" look

<h1 style="text-align: center">
  <span style="font-family: Verdana; position: relative">
    <span style="position: absolute; left: 2px; top: 2px; width: 100%; color: #f00; opacity: 0.5; ">
      Service Request Created
    </span>
    <span style="position: relative">
      Service Request Created
    </span>
  </span>
</h1>
Asons
  • 84,923
  • 12
  • 110
  • 165