How to Create Cross Browser CSS Gradient
Using images to obtain gradient background is now over. When webkit launched CSS gradient, 3 years back, it was not much used, due to compatibility issue. Now most used browsers support CSS gradient effect through their own standards. Now let us create a cross browser gradient css class of our own.
First of all we write a simple html to show the content:
<div class="gradienteffect">
www.lookmywebpage.com
</div>Define a <style> tag inside <head> and add following css code. Do not worry about the bulk amount of lines. Its just to stabilize the <div> tag. Important are the last 3 lines.
.gradienteffect{
width: 500px;
height: 300px;
font-family: arial;
font-size: 36px;
color: #000000;
background:#1BE035;
float: left;
text-align: center;
margin: auto;
vertical-align: middle;
line-height: 300px;
/* for webkit browsers like safari and chrome */
background: -webkit-gradient(linear, left top, left bottom, from(#19A82C), to(#FAF619));
/* for firefox 3.6+ */
background: -moz-linear-gradient(top, #19A82C, #FAF619);
/* for internet explorer */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19A82C', endColorstr='#FAF619');
}Here is how the output look like:
I have personally tested the code with IE8, Firefox 4,Chrome 12. Please provide your valuable feedback as comments.
Comments
No comments yet.
