Hi friends in this I am sharing multiple color gradients.Multiple color gradients means here we have to use multiple color stops .Already we have discussed linear gradients from top to bottom css3 gradients-Linear method , CSS3 Gradients -Radial Gradient method ,css3 linear gradients–left to right,css3 linear gradients– Diagonal .Multiple color gradients is very easy ,just we have to add more color names with separated commas.
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, color-stop3,color-stop4,color-stop5...);
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>
<head>
<style>
#grad1 {
height: 250px;
width: 250px;
background: -webkit-linear-gradient(left, brown,red,orange,yellow,gray ); /* For Safari not work in old browsers*/
background: -o-linear-gradient(left, red, brown,red,orange,yellow,gray); /* For Opera not work in old browsers */
background: -moz-linear-gradient(left, brown,red,orange,yellow,gray); /* For Firefox not work in old browsers */
background: linear-gradient(to right, brown,red,orange,yellow,gray); /* Standard syntax (must be last) */
}
.bor{width:550px;border-width: 1px;border-color:black;border-style:dashed;}
</style>
</head>
<body><h3>Gradient With Multiple Colors </h3>
<div id="grad1"></div><p class="bor"><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Finally you will get the output like above image
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment