Hi friends in this post I am sharing linear gradients from left to right.Already we have discussed linear gradients from top to bottom css3 gradients-Linear method and CSS3 Gradients -Radial Gradient method .Css3 linear gradients from left to right is also very simple just linear gradient method like top to bottom.
Keep in mind css3 gradients will not work older browsers in general . Another thing in order to work gradients in all browsers you have write separate syntax for browsers.
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Already we have explained how to create a html file in notepad.Kindly check that and now copy next paste the following code in that html file.Open with above mentioned browsers.
Keep in mind css3 gradients will not work older browsers in general . Another thing in order to work gradients in all browsers you have write separate syntax for browsers.
For chrome =“-webkit-“
For firefox=”-moz-”
For safari=”-webkit-”
For opera=”-o-”
In this type you have to declare two colors .
Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);
Already we have explained how to create a html file in notepad.Kindly check that and now copy next paste the following code in that html file.Open with above mentioned browsers.
<html>Finally you will get the output like above image
<head>
<style>
#grad1 {
height: 250px;
width: 250px;
background: -webkit-linear-gradient(left, brown, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, brown, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, brown, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, brown , yellow); /* Standard syntax */
}
.bor{width:550px;border-width: 1px;border-color:black;border-style:dashed;}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<div id="grad1"></div>
<p class="bor"><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment