I have been experimenting with using shadows to outline text, which is a solution I came across in various Stack Overflow threads. However, support for text-outline and text-stroke features is currently limited.
I am encountering an unusual issue with one of the letters when trying to implement the shadow hack.
Here's how I incorporated the shadow hack:
<div id="background">
<h1 id="buzz-joy">BU<span id="small-raised-z">Z</span>Z-JOY</h1>
</div>
and
#background {
height 100px;
text-align: center;
background-color: grey;
}
#buzz-joy {
font-family:"Arial Black";
color: Yellow;
font-size:4em;
display: inline-block;
text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px 2px 0 black, -2px -2px 0 black;
padding: 0;
margin: 0;
}
to achieve this effect
http://jsfiddle.net/abalter/e3QUp
However, there seems to be a strange issue with the letter "Y".
Can someone provide suggestions on how to resolve this problem?