Description:
I found the pure css text gradient technique (without hack, image or expression) in the below link.
The technique used CSS 2.1 features. So, That was not cross browser compatible, specifically for IE5
and IE6.
http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-pure-css-without-using-background-image
The full credit is author’s. Here, I have changed just few things to get cross-browser compatibility.
DEMO
HTML and CSS code:
<html>
<head>
<style type="text/css" title="text/css">
h1 {
font-family: "Myriad Pro", sans-serif;
font-size: 40px;
font-weight: normal;
}
.white-gradient {
position:relative;
}
.white-gradientdiv {
position:absolute;
display:block;
top:0;
left:0;
height:40px;
width:800px;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
</style>
</head>
<body>
<h1 class="white-gradient">Pure CSS text gradient without any graphics<div class="white-gradientdiv"></div></h1>
</body>
</html>
No comments:
Post a Comment