Adjusting css gradient background

Question

Is it possible to amend/adjust a gradient background so the fade starts lower done. Example, see the fiddle here http://jsfiddle.net/gZgLc/5/

Let's say for example I wanted the white ti start to fade in at the '123test' text, how would I do this?

HTML

<div id="main"> <div class="feature-box"> <div class="feature-box-tab"> <div class="slide" style="height:250px;"> <div class="inner"> <ul class="breadcrumb"> <li><a href="index.php">Home</a></li> </ul> </div> </div> </div> </div> <div class="single-feature-top"> <p>123test. 123test<br><br> </div> <br> </div>

CSS

#main { width:958px; position:relative; top:-9px; background:#FF9900 url(../images/core/header.png) no-repeat center top; border:1px solid #dadada; border-top:none; border-bottom:2px solid #dadada; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px; border-radius:8px; margin:0 auto 25px; background: #fff; background: url('linear-gradient.png') 0 0 repeat-x; background: -webkit-linear-gradient(#fff, #FF9900);

Do you mean on the fly, or just changing the CSS so it is always different? If you just want to know what the proper syntax is... I suggest just using this tool: colorzilla.com/gradient-editor — robooneus
– robooneus, Commented Aug 19, 2013 at 12:36
Yeah, i just meant permanently so the gradient is where I want it to begin all the time. I don't want it to change. thanks, I'll check out the link — jfar_2020
– jfar_2020, Commented Aug 19, 2013 at 12:40
Have you read the documentation on gradients? E.g. developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient — RoToRa
– RoToRa, Commented Aug 19, 2013 at 12:43
What @RoToRa says, read the part about color stops, which allow you to specify position for each color (you can have the same color at 0% and 70% for instance). Alternatively, if you want the gradient only on the .single-feature-top you could just apply it to that instead? jsfiddle.net/gZgLc/8 — xec
– xec, Commented Aug 19, 2013 at 12:52

MarsOne · Accepted Answer · 2013-08-19 13:04:16Z

Definately ... You have to use percentages for that.

Solution

All the code was generated from this website.Source Website

CSS added.

background: -moz-linear-gradient(top, #fff 0%,#fff 75% #ff9900 80%, #ff9900 100% ); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff),color-stop(70%, #fff), color-stop(80%, #ff9900), color-stop(100%, #ff9900)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%); /* IE10+ */ background: linear-gradient(to bottom, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%, #ff9900 100%, #ff9900 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eded2f', endColorstr='#ff9900', GradientType=0); /* IE6-8 */

EDIT: Also remember that this may not work exactly the same on older IE browsers(IE6-8).

EDIT2: Changed colours in the fiddle to reflect your desired colours

You don't have to use percentages, any length unit (like px, em etc) will work too.
Correct. However it has to be relative to the element it is being applied to.
MarsOne, your solution is exactly what I wanted. I had to edit the percentages slightly to get what I wanted but done the job! Thanks a lot.
@MarsOne, As it goes I want to see how the background looks with a solid border line. I updated your jsfiddle jsfiddle.net/gZgLc/10 What I am looking to try now is to rise this line so there the orange goes slightly higher. How would i do this?

Collectives™ on Stack Overflow

Adjusting css gradient background

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related