Skip to content

Instantly share code, notes, and snippets.

@rhunter

rhunter/coloursplit.html

Created July 1, 2011 04:34
Show Gist options
  • Save rhunter/1057874 to your computer and use it in GitHub Desktop.
Save rhunter/1057874 to your computer and use it in GitHub Desktop.
Download ZIP
Split colour (could be gradients) that works on IE8 with minimal extra markup
Raw
coloursplit.html
<!DOCTYPE html>
<html><head>
<style type="text/css">
.section {
position: relative;
z-index: -50;
}
h1:before {
display: block;
content: "";
color: #7ca;
background-color: #bac;
height: 50%;
width: 100%;
position:absolute;
top: 0px;
left: 0px;
z-index: -10;
}
h1:after {
background-color: #cab;
content: "";
color: #7ca;
height: 50%;
width: 100%;
position:absolute;
left: 0px;
bottom: 0px;
z-index: -10;
}
</style>
</head>
<body>
This text is outside
<div class="section">
<h1>An H1 with a single wrapper</h1>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment