Chrome Text Shadow - Does Gmail Fail?

Question

So, I have one webpage that uses CSS text-shadow effect for the effect.

If I view a webpage in Chrome, the shadow shadow effect I expect will be.

But if I send an HTML email to my gmail account and view the page inside Gmail (using the same browser), the shadow shadow effect will disappear.

see related image. Part on the left is viewing the surf on the page, part on the right is the same html content that is sent to me in gmail. As you can see, the shadow effect has disappeared.

PICTURE HERE: Image

This is used by CSS:

<style type="text/css"> p { padding: 0; margin: 0; } h1, h2, h3, p, li { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } td { vertical-align:top;} ul, ol { margin: 0; padding: 0;} .title, .date { text-shadow: #8aa3c6 0px 1px 0px; } .textshadow { text-shadow: #ffffff 0px 1px 0px; } .trxtshadow-2 { text-shadow: #768296 0px -1px 0px; } </style> 

Sounds weird. Any ideas?

Answer 1

GMail does not support <style> blocks in email messages. For maximum compatibility, you should use inline styles in most HTML posts. Yes, this is ugly. But this is real reality.

See the following:

• Campaign Monitor - A guide to css support in email clients
• Sitepoint - How to Copy HTML Newsletters
• Campaign Monitor - Email Design Guide

Answer 2

As Joshua says, gmail selects <style> blocks, but also highlights some styles from inline blocks, including text-shadow and border-radius , as I just opened.

If you have these styles embedded in an element in a html-letter, start firebug in gmail and take a look at them - they have disappeared. However, if you show the original, you will see styles by email.

I suppose they do this to look consistent in browsers, but this is a weird behavior, and it seems like most of the work is in the gmail part.