Gradient use in css3
Gradients are smooth transitions between two or more specified colors.
The CSS gradient feature was introduced by Webkit about two years back, but was not very successful as most popular browers didn't support the feature. But now that is set to change with the arrival of CSS3 which supports gradients, specifically, linear and radial gradients. CSS Gradients are supported in FF3.6+, Safari 2+ and Google Chrome and IE5+.
Use this demo to create CSS background-image gradients. The CSS markup works in browsers (including Internet Explorer 10, Chrome, Firefox, Opera, Safari) that support CSS3 gradients in unprefixed form or with any of the following vendor prefixes: -ms-, -moz-, -o-, -webkit-.
The CSS gradient feature was introduced by Webkit about two years back, but was not very successful as most popular browers didn't support the feature. But now that is set to change with the arrival of CSS3 which supports gradients, specifically, linear and radial gradients. CSS Gradients are supported in FF3.6+, Safari 2+ and Google Chrome and IE5+.
Use this demo to create CSS background-image gradients. The CSS markup works in browsers (including Internet Explorer 10, Chrome, Firefox, Opera, Safari) that support CSS3 gradients in unprefixed form or with any of the following vendor prefixes: -ms-, -moz-, -o-, -webkit-.
Linear Gradient (Top → Bottom)
CSS
------------------------------------------------------------------------------------------------------------------------------------------------------
#linearBg2 {
/* fallback */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
------------------------------------------------------------------------------------------------------------------------------------------------------
Linear Gradient (Left → Right)
CSS
------------------------------------------------------------------------------------------------------------------------------------------------------
#linearBg1 {
/* fallback */
background-color: #1a82f7;
background-image: url(images/linear_bg_1.png);
background-repeat: repeat-y;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7);
} -----------------------------------------------------------------------------------------------------------------------------------------------------
Linear Gradient (with Even Stops)
CSS
------------------------------------------------------------------------------------------------------------------------------------------------------
#even-stops { /* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); }
-----------------------------------------------------------------------------------------------------------------------------------------------------
Linear Gradient (with Specified Arbitrary Stops)
CSS
------------------------------------------------------------------------------------------------------------------------------------------------------
#arbitrary-stops { /* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); }
-----------------------------------------------------------------------------------------------------------------------------------------------------
Radial Gradient (Centered, Full Size)
CSS
------------------------------------------------------------------------------------------------------------------------------------------------------
#radial-center { /* fallback */ background-color: #2F2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #1a82f7, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #1a82f7, #2F2727); /* Opera cannot do radial gradients yet */ }
-----------------------------------------------------------------------------------------------------------------------------------------------------
Radial Gradient (Positioned, Sized)
Warning: Not Consistent Among Browsers
CSS
------------------------------------------------------------------------------------------------------------------------------------------------------
#radial-position { /* fallback */ background-color: #2F2727; background-image: url(images/radial_fancy.png); background-position: 80% 20%; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); /* Opera cannot do radial gradients yet */ }
-----------------------------------------------------------------------------------------------------------------------------------------------------
Try it and enjoy.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment