Alter this code to create fade effect

Resolved KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

header.tc-header {
border-bottom: 12px solid #4a7023;
}

This is the code I dropped into my “Custom CSS” box to change the color and width of the grey bar above the slider and below the header. Id like to make this bar (from top to bottom) fade from #e7ffcf to #4a7023.

Viewing 15 replies - 1 through 15 (of 15 total)

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 4 months ago

Fade on what event? What will happen for it to fade?

Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

I dont mean for it to be an action. I need a gradient fade of the color.

Is that what your asking? Im so new its unrealistic. Sorry

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 4 months ago

Try a CSS generator for this http://www.colorzilla.com/gradient-editor/

Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

Im trying to create this effect. I want my header background color to fade into the bar above my slider. I think this explains myself a little better maybe, lol. Thanks

Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

http://thegreenhousedepot.com

Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

This is my site

Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

I like the tool you suggested. However, I have no idea where to put the code it generated. Can i just place it in the color section of the code I entered above?
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 4 months ago
Sure, in here:
```
header.tc-header {
 border-bottom: 12px solid #4a7023;
}
```
E.g,
```
header.tc-header {
 border-bottom: 12px solid #4a7023;
 background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
 background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
```
Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

That give my entire header section a gradient. You can see a dark green border above my slider on my website. I just want that little strip of green to be faded. The first code I provided allows me to change the color and thickness of that strip but I would like to make it more subtle.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 4 months ago

Did you resolve this?

Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

Not yet but I will keep the post up to date if I do.
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 4 months ago
Oh I see what you’re trying to do now.

I don’t think you can achieve this by using a border.

Try removing the border and instead use the “before” pseudo selector to style a make-shift element before the slider.

Try this CSS:
```
#customizr-slider {
 position: relative;
}

#customizr-slider:before {
 content: "";
 position: absolute;
 width: 100%;
 height: 10px;
 top: -10px;
 left: 0;
 /* Enter your background gradient stuff here */
}
```
Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

That is perfect! Thanks a billion. Is there anyway to do the same thing to the bottom of the slider? I think that looks so nice Id like to try on both top and bottom.
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

12 years, 4 months ago
Try this:
```
#customizr-slider {
 position: relative;
}

#customizr-slider:before,
#customizr-slider:after {
 content: "";
 position: absolute;
 width: 100%;
 height: 10px;
 left: 0;
 /* Enter your background gradient stuff here */
}

#customizr-slider:before {
 top: -10px;
}

#customizr-slider:after {
 bottom: -10px;
}
```
Thread Starter KcGuitfiddle
(@kcguitfiddle)

12 years, 4 months ago

Works perfect with my shadow. Thanks so much!

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Alter this code to create fade effect’ is closed to new replies.

Tags