free collection of graphic resource for designer include: vector graphic art, vector images, vector illustration, free photos, free hd photo, free pictures, free website templates, free icons, psd graphic, free font, photoshop brush, photoshop patterns, photoshop styles, wallpapers,business card design,logo design,web site design, all are free for download.

Gradient use in css3

No comments
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-. 


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.

No comments :

Post a Comment