Linear gradient

  • Author
    Posts
  • #667415

    fpi2015
    Member

    Hey guys I want to apply linear gradient to my background. I’ve tried the code of linear gradients generators but it doesn’t work… please if someone could give me a solution!!!!!!

    Thanks

    The blog I need help with is coinfooservices.wordpress.com.

    #667558

    What browser were you looking at it in after you set the gradient? Can you post the code you used here so we can take a look at it?

    #667568

    fpi2015
    Member

    #page
    {
    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BFE8B7), to(#0A3005), color-stop(.6,#1F3320));
    }

    This is the coding that an online linear gradient generator is giving me… I’m trying to see it in Google Crome and Safari

    #667572

    Each browser has their own way of doing gradients, and you have to include all of those different declarations (7 unique) otherwise those other browsers will not render the gradient. Go here and use their online gradient generator and it will generate the code for all browsers.

    http://www.colorzilla.com/gradient-editor/

    #667712

    fpi2015
    Member

    Hey I tried to use your advice and is not working… I have no idea why… I don’t know if Css in WordPress has some restrictions or what.. anyway..

    The div is Page so this is my code

    #page {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #3aff72 50%, #f7f7f7 64%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#3aff72), color-stop(64%,#f7f7f7), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* W3C */
    }

    But nothing happens… Have you put a color degradation as a background in wordpress???

    Thanks in advance!!

    #667713

    fpi2015
    Member

    and when I save the stylesheet all the coding disappear and this is what is left:

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#1e5799′,endColorstr=’#7db9e8′,GradientType=0);
    background:linear-gradient(top,#1e57990%,#3aff7250%,#f7f7f764%,#7db9e8100%);

    #667714

    fpi2015
    Member

    Please I’m going nuts!!!!! Someone help me… I’m using the Toolbox theme… and the address of the site is http://coinfooservices.wordpress.com

    I know I have the selector right, because when I put a background color it works actually now is yellow…. but when I try to put the coding for the linear gradient nothing happens…. PLEASE!!!! I”M ABOUT TO GRAB THE COMPUTER AND DESTROY IT!!!!

    #667717

    Apparently wordpress has gone all CSS3 only and is not supporting the moz and webkit linear gradient declaration. I’m not sure what to tell you. I can’t even get Firebug in Firefox to recognize linear gradient or even the -moz. It just strips it out as well.

    Create a gradient image about 5 px wide and use a background declaration and set it to repeat in the “X” direction is my only other suggestion.

    #667721

    fpi2015
    Member

    Thanks for your time man…. I’ll try your solution…. you are a good man!

    #667726

    You are welcome and sorry we could not get the gradient working. I’ve tested it before here and it worked. In fact there are some themes here that use it.

The topic ‘Linear gradient’ is closed to new replies.