Skip to content

Instantly share code, notes, and snippets.

@OpenGrid

OpenGrid/ie-drop-shadow.html

Created November 4, 2011 12:21
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save OpenGrid/1339214 to your computer and use it in GitHub Desktop.
Save OpenGrid/1339214 to your computer and use it in GitHub Desktop.
Download ZIP
A better text-shadow in IE8 and IE9
Raw
ie-drop-shadow.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-nocompat.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
body {
background-color: green;
}
h1 {
font-family: Impact;
font-size: 3em;
color: white;
text-shadow: 3px 3px black;
}
h1.ie9, h1.ie8 {
color: white;
position: relative;
text-shadow: none; /* for non IE browsers */
z-index: 20;
}
h1.ie9, h1.ie8 { position: relative; z-index: 10;}
h1.ie9:before, h1.ie8:after {
position: absolute;
content: attr(data-content);
color: black;
width: 100%;
top: 3px;
left: 3px;
z-index: -1;
opacity:0.5;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
});//]]>
</script>
</head>
<body>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Text Shadow</title>
</head>
<body>
<div>
<h1 data-content="Drop Shadow">Drop Shadow</h1>
<h1 class="ie9" data-content="Drop Shadow">Drop Shadow</h1>
<h1 class="ie8" data-content="Drop Shadow">Drop Shadow</h1>
</div>
</body>
</html>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment