Skip to content

Instantly share code, notes, and snippets.

@LoicMahieu

LoicMahieu/backgroundClipText

Created February 13, 2012 21:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LoicMahieu/1820503 to your computer and use it in GitHub Desktop.
Save LoicMahieu/1820503 to your computer and use it in GitHub Desktop.
Download ZIP
BackgroundClipText - Modernizr Test
Raw
backgroundClipText
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BackgroundClipText - Modernizr Test</title>
<script src="modernizr.js"></script>
<script>
function getBgClipValue(elem){
return (
window.getComputedStyle ?
getComputedStyle(elem, null).getPropertyValue('background-clip') :
elem.currentStyle['background-clip']
);
}
Modernizr.testStyles(' #modernizr { '+ Modernizr._prefixes.join('background-clip: text; ') +' } ', function(elem, rule){
Modernizr.addTest('backgroundcliptext', (
window.getComputedStyle ?
getComputedStyle(elem, null).getPropertyValue('background-clip') :
elem.currentStyle['background-clip']
) == 'text');
});
</script>
<style>
html.backgroundcliptext div {
background: -webkit-linear-gradient(left, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
color: transparent;
-webkit-background-clip: text;
border: 2px solid #b8e1fc;
}
div {
font-size: 22px;
color: black;
text-align: center;
width: 200px;
margin: 0 auto;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
Hello World with backgroundClipText
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment