Jump to content
Stef's Coding Community
activeworker

Gradient

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...