Grow your CSS skills. Land your dream job.

CSS3 gradient w/ opacity

  • # February 26, 2013 at 5:20 pm

    I am attempting to create a navigation bar that gradiates horizontally.

    http://i.imgur.com/HVz5QOX.png

    position: 0% / #39C2DA / opacity: 0%

    position: 35% / #39C2DA / opacity: 100%

    position: 0% / #39C2DA / opacity: 0%

    This is the best I can come up with that works

    background-image: -moz-linear-gradient(left, #fff, #39C2DA, #fff);

    Unfortunately, its not in position and neither am I incorporating opacity.

    # February 26, 2013 at 5:26 pm

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(57, 194, 218, 0)), color-stop(0.35, rgba(57, 194, 218, 1)), to(rgba(57, 194, 218, 0)));
    background-image:-webkit-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0));
    background-image: -moz-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0));
    background-image: -ms-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0));
    background-image: -o-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0));
    background-image: linear-gradient(to right, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0));

    Edit… this should work :P

    # February 26, 2013 at 5:32 pm

    @CrocoDillon

    Perfect: http://codepen.io/anon/pen/zJuCh

    # February 26, 2013 at 5:35 pm

    I updated my post with old webkit syntax and positioning the 2nd color @Paulie_D, thanks for creating the codepen though :)

    # February 26, 2013 at 5:36 pm

    Thanks Croco, it does! I never understood why is it that if you want to use opacity, you have to use an RGBA code and not HEX?

    # February 26, 2013 at 5:38 pm

    @Paulie_D, that codepen doesn’t include the positioning of the 2nd stop at 35% correct?

    # February 26, 2013 at 5:39 pm

    Yeah that annoys me to be honest, I prefer using hex but they only support alpha on rgba and hsla…

    # February 26, 2013 at 5:40 pm

    Because HEX = RGB in the format #RRGGBB and so does not include opacity.

    RGBA does include opacity (a = alpha)

    # February 26, 2013 at 5:41 pm

    Codepen updated.

    # February 26, 2013 at 5:45 pm

    Thanks for updating @Paulie_D, and yeah didn’t know about that!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".