Skip to content

Instantly share code, notes, and snippets.

@heygrady
Created March 10, 2011 01:41
Show Gist options
  • Save heygrady/863419 to your computer and use it in GitHub Desktop.
Save heygrady/863419 to your computer and use it in GitHub Desktop.
simple red text-shadow
h1 {
color: #00ff00;
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
...
<h1>
<span class="shadow">
<span class="shadow-orig">Some text&hellip;</span>
<span class="shadow-copy">Some text&hellip;</span>
</span>
</h1>
...
h1 {
filter: progid:DXImageTransform.Microsoft.DropShadow(offX=2,offY=2,color=ff0000);
}
h1 {
filter: progid:DXImageTransform.Microsoft.Glow(color=ff0000,strength=2);
}
.ui-text-shadow {
position: relative;
}
.ui-text-shadow-original {
position: relative; /* above copy */
z-index: 2;
text-shadow: none;
}
.ui-text-shadow-copy {
position: absolute;
z-index: 1; /* below original */
/* default positioning */
left: 0;
top: 0;
/* turn off shadow */
text-shadow: none;
/* turn off selection */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
h1 {
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);
}
<div class="box">
<h1><span class="ui-text-shadow"><span class="ui-text-shadow-original">Some </span><span class="ui-text-shadow-copy">Some </span></span><span class="ui-text-shadow"><span class="ui-text-shadow-original">text </span><span class="ui-text-shadow-copy">text </span></span><span class="ui-text-shadow"><span class="ui-text-shadow-original">that </span><span class="ui-text-shadow-copy">that </span></span><span class="ui-text-shadow"><span class="ui-text-shadow-original">wraps </span><span class="ui-text-shadow-copy">wraps </span></span><span class="ui-text-shadow"><span class="ui-text-shadow-original">and </span><span class="ui-text-shadow-copy">and </span></span><span class="ui-text-shadow"><span class="ui-text-shadow-original">has </span><span class="ui-text-shadow-copy">has </span></span><span class="ui-text-shadow"><span class="ui-text-shadow-original">a </span><span class="ui-text-shadow-copy">a </span></span><b><span class="ui-text-shadow"><span class="ui-text-shadow-original">s</span><span class="ui-text-shadow-copy">s</span></span><i><span class="ui-text-shadow"><span class="ui-text-shadow-original">h</span><span class="ui-text-shadow-copy">h</span></span><b><span class="ui-text-shadow"><span class="ui-text-shadow-original">a</span><span class="ui-text-shadow-copy">a</span></span></b><span class="ui-text-shadow"><span class="ui-text-shadow-original">d</span><span class="ui-text-shadow-copy">d</span></span></i><span class="ui-text-shadow"><span class="ui-text-shadow-original">ow.</span><span class="ui-text-shadow-copy">ow.</span></span></b></h1>
</div>
h1 {
text-shadow: 2px 2px 2px #ff0000;
}
...
<div class="box">
<h1>Some text that wraps and has a <b>s<i>h<b>a</b>d</i>ow.</b></h1>
</div>
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment