Hi friends in this post I am sharing about css3 gradients Radial method.As I already have written a post “how to create css3 gradients-Linear method ”. Photoshop with its available gradients can create Radial Gradients .But the problem is when you use it on your site or blog,it took more time to load.So using css Radial gradients will help to solve to this problem.
A radial gradient is defined by its center.We have to mention two color stops for the radial gradient.
Syntax
background: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.In this post I am sharing about evenly spaced radial gradient.Copy and paste the below code in notepad and run in browsers.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 250px;
width: 250px;
background: -webkit-radial-gradient( brown, yellow); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient( brown, yellow); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient( brown, yellow); /* For Firefox 3.6 to 15 */
background: radial-gradient( brown, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body><h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div><p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
For chrome =“-webkit-“
For firefox=”-moz-”
For safari=”-webkit-”
For opera=”-o-”
Finally you will get the output like below image.
We will update different shapes in css3 gradients in further posts.
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment