activeworker Posted May 4, 2013 Report Share Posted May 4, 2013 Hi Everybody, Good day Please see the following code and response. background: #6a6a6a url(images/nav-bar-bg.png) repeat-x; background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a)); background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a); background: linear-gradient(-90deg, #b9b9b9, #6a6a6a); Please let me know that what is gradient and linear-gradient? Why takes different values here like 2nd line webkit-gradient(linear, left top, left bottom, 3rd line -moz-linear-gradient(top and 4th line background: linear-gradient(-90deg, No more, I am waiting for your kind response. Thank you. Quote Link to comment Share on other sites More sharing options...
mrtezmo Posted May 4, 2013 Report Share Posted May 4, 2013 Gradients are used to fade one color to another. Linear gradient is where the color fades down the page for example or accross, there are other types such as radial (circular) where it starts in the middle and fades to the edge. You can specify the start and end positions of the gradient, hence the top left and bottom left. You can also use more than two colors and specify multiple start points for each color. The syntax to apply a gradient differs from browser to browser, as in your example webkit(Chrome, Safari) is different from Mozilla (Firefox)but will both produce the same result. I am just a beginner myself and I am sure someone else can clarify this better, if i have a css problem i usually start by looking at css tricks , a very useful website. Quote Link to comment Share on other sites More sharing options...
kralcx Posted May 4, 2013 Report Share Posted May 4, 2013 background: #6a6a6a url(images/nav-bar-bg.png) repeat-x; background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a)); background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a); background: linear-gradient(-90deg, #b9b9b9, #6a6a6a); Please let me know that what is gradient and linear-gradient? Why takes different values here like 2nd line webkit-gradient(linear, left top, left bottom, 3rd line -moz-linear-gradient(top and 4th line background: linear-gradient(-90deg, 1st line: is a fallback, in case the browser doesn't recognize any gradients. 2nd line: is vendor specific code for older webkit broswers 3rd line: is vendor specific code for mozilla browswers (firefox) 4th line: is standard code for a linear gradient I've included below additional code that should have been included in this css: background: -webkit-linear-gradient(top, #b9b9b9, #6a6a6a); this would go between lines 2 and 3; this is vendor specific code for modern webkit browsers background: -o-linear-gradient(top, #b9b9b9, #6a6a6a); this would go between lines 3 and 4; this is vendor specific code for opera browsers background: -ms-linear-gradient(top, #b9b9b9, #6a6a6a); this would follow the above line; this is vendor specific code for Internet Explorer 10 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b9b9b9', endColorstr='#6a6a6a'); this come after line 4; this is vendor specific code for Internet Explorer 7-9 Hope this helps you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.