Inconsistent results when using the color: property

[babyboomer]

I've been using the following CSS rule…

.inset-shadow {
    color: Transparent;
    background: #8C2633;
    text-shadow: rgba(255, 255, 255, 0.4) 2px 2px 2px, 0 0 0 rgba(0, 0, 0, 0.5);
}

… to produce the following result:

The following is another example of this text effect…

…which can be found in the following exercise on CodePen

The problem is that the behavior of this construct is inconsistent. Specifically, the Microsoft browsers are having difficulty displaying the text when I use the "transparent" value for the CSS color property. Subsequent research would indicate that there is no such value for the color property. I tried replacing the "transparent" value with the CSS rgba function with something like this: rgba(255, 255, 255, 0.0) – but it didn't work.

I have found variations on the theme, but they aren't as effective. I'm not sure that there is a solution, but if I can get the code to work in Microsoft browsers, that would be preferable.

 

 

Edited September 17, 2018 by babyboomer
content modifications

[Funce]

I've had a look through and its the variations on handling between `color`, `text-shadow` and  `background-clip`

I noticed that some browsers handle their styling groupings differently. Its illustrated clearly with the discrepancy between Chrome, Edge, and Internet Explorer.

Internet Explorer doesn't obey `background-clip: text`. Hence you can't see the text at all.

Take a peek at https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip to check for compatibility.

Edge groups its opacity for its `text-shadow` with that of its normal `color` hence when you use `transparent` it makes the shadow transparent also. It does however obey `background-clip` so you can still see the text.

Chrome seems to keep all of them separate with none affecting the others.

 

If you wish to support these browsers you might want to look into browser specific styling.

Edited September 17, 2018 by Funce

[babyboomer]

Thank you, Funce.

Ideally I'd like to implement browser-specific styling. What little research I've done seems to indicate that browser detection is not an exact science. While waiting for a perfect solution, however, I'm willing to implement whatever is the current best practice. I looked at Polyfills, but didn't find anything applicable. Perhaps someone has authored a script that would do the job. A point in the right direction would be greatly appreciated.

[babyboomer]

This link looks interesting!

[dsonesuk]

Don't forget to allow for device 'warm glow' (yellow tint) and 'cool glow' (blue tint) setting for device display. :-)