Hi friends in this post I am sharing about css3 gradients linear method.Actually you can create a gradient using photoshop with its available gradients or you can create it on your own.But the problem is when you use it on your site or blog,it took more time to load.So using css gradients will help to solve to this problem.
Actually there are two types of gradients (i.e) linear and radial.Only one problem in css3 gradients it will not work in older browsers and it works in latest versions.But I hope nowadays only less members will use older versions.Another thing in order to work gradients in all browsers you have write separate syntax for browsers.
Syntax
Another thing you can mention direction which we update in further posts.Already we have explained hoew 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.
Actually there are two types of gradients (i.e) linear and radial.Only one problem in css3 gradients it will not work in older browsers and it works in latest versions.But I hope nowadays only less members will use older versions.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 the linear method. you have declare two colours and here it is mentioned as color stops.Color stops are used to make smooth transistions.Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Another thing you can mention direction which we update in further posts.Already we have explained hoew 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.
<!DOCTYPE html>Finally you will get the output like above image
<html>
<head>
<style>
#grad1 {
width: 200px;
height: 200px;
background: -webkit-linear-gradient(brown, yellow); /* For Safari */
background: -o-linear-gradient(brown, yellow); /* For Opera */
background: -moz-linear-gradient(brown, yellow); /* For Firefox */
background: linear-gradient(brown, yellow); /* Standard syntax */
}
.bor{width:550px;border-width: 1px;border-color:black;border-style:dashed;}
</style>
</head>
<body>
<h2>Linear Gradient - Top to Bottom</h2>
<p >This linear gradient starts at the top. This linear gradient starts "brown" and transitioning to "yellow".</p>
<div id="grad1"></div>
<p class="bor"><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment