• Resolved KcGuitfiddle

    (@kcguitfiddle)


    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

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

    Thread Starter KcGuitfiddle

    (@kcguitfiddle)

    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

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

    Thread Starter KcGuitfiddle

    (@kcguitfiddle)

    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)

    Thread Starter KcGuitfiddle

    (@kcguitfiddle)

    Thread Starter KcGuitfiddle

    (@kcguitfiddle)

    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

    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)

    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

    Did you resolve this?

    Thread Starter KcGuitfiddle

    (@kcguitfiddle)

    Not yet but I will keep the post up to date if I do.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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)

    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

    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)

    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.