Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 30, 2019 at 10:14 pm #1152530
    venolab

    Hi,
    I’m using several grid rows. I need a gradient color over multiples sections of the grid row, e.g. from left bottom to right top for the entire grid row. I Don#t want, that the gradient is repeating in the single sections.

    I hope (and I know), that somebody has got a nice css code to solve my problem. ;)

    Thanks a lot. Yours, Thomas

    October 31, 2019 at 12:59 am #1152583
    Jordan Shannon

    Hey Thomas,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    October 31, 2019 at 11:32 am #1152659
    venolab

    Hi Jordan,

    the site is still in coming-soon-mode. Below you can find the link and account Information.

    Thanks.

    October 31, 2019 at 1:04 pm #1152688
    Guenni007

    just give a custom-class or unique ID to the whole grid-row element.
    The rest is css in quick css.
    See here example: https://webers-testseite.de/grid-row-background-image/
    here you can find a nice tool to generate gradients ( even as svg image ) : https://angrytools.com/gradient/

    you know how to set in quick css a background-image ( Gradient ) ?

    October 31, 2019 at 2:18 pm #1152706
    venolab

    Hi Guenni,

    thanks for your reply. I think, I mean something different.

    Here, you can See a screenshot. –> Dropbox There are to sections. In the left section, there is an image shown. Now, I want to have a color gradient from the left edge to the right edge – so to say fullwidth.

    you know how to set in quick css a background-image ( Gradient ) ?

    No, not yet. I think, I had solved this (assuming I got it right) in Photoshop.

    Yours, Thomas

    October 31, 2019 at 4:21 pm #1152785
    Guenni007

    but you see on my testpage – that there is a whole image as background to both grid elements?

    the red arrow shows to the grid-row element
    the green arrows show you inside the grid-row elements.
    So if you have no background definition on the cells the grid-row element background is seen.
    You see on my code there is a unique ID to that grid-row element – and to that unique ID i made a css rule for the background-image. If you know how to use developer tools of your browser you can see the code.

    the link to your gradient is f.e. : https://angrytools.com/gradient/?0_f4c695,100_b7885f&0_100,100_100&l_35
    but take background-image as attribute

    my css on that page will be this way:

    #with-background-image {
    background-image: -webkit-linear-gradient(35deg,#f4c695 0%,#b7885f 100%);
    background-image: linear-gradient(55deg, #f4c695 0%, #b7885f 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
    October 31, 2019 at 9:49 pm #1152879
    venolab

    Hi Guenni,

    you`re awesome!!!! Thanks a lot – that solved my problem!

    <blockquote>but you see on my testpage – that there is a whole image as background to both grid elements?</blockquote>

    No, I didn’t. 😬

    I’ve changed the code in that (just for other readers of this thread):

    .with-background-image {
    background-image: -webkit-linear-gradient(35deg,#f4c695 0%,#b7885f 100%);
    background-image: linear-gradient(55deg, #f4c695 0%, #b7885f 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

    But I have still one question concerning the css-code: Why are there two details about the angle (35 deg and 55 deg)? I would have guessed to Set it up to 45 deg, based on a gradient from left bottom to the right top?!

    Thanks a lot again!!!

    Yours, Thomas

    • This reply was modified 5 years ago by venolab.
    November 1, 2019 at 3:23 pm #1153069
    Guenni007

    i changed the testpage to a similar gradient you like to use.
    PS:
    the normal w3c definition of angle is that the top position marks the 0deg and the count goes clockwise.
    the other browser definitions : the horizontal right position is the 0deg and the angel is meassured counter clockwise.
    so 45deg are on both coordinate systems the same but 35deg on the first is (90-35) = 55deg on the other.
    on most cases the w3c will be enough ( but i usually add the webkit definition too /* safari5.1+,chrome10+ */ )

    Please don’t ask why w3c set it this way – on mathematical coordinate systems the other is the most common in use.

    November 2, 2019 at 12:24 am #1153161
    venolab

    Thanks a lot for your explanation. The code Works well – thanks again!

    This thread can be closed.

    November 2, 2019 at 9:01 pm #1153353
    Mike

    Hi,
    Glad Guenni007 could help, Thank you Guenni007 and thanks for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘grid row gradient color over multiple sections’ is closed to new replies.