Grow your CSS skills. Land your dream job.

Pseudo Element gradients

  • # December 18, 2012 at 8:52 pm

    Hi all,

    I’ve been working on a css ribbon using gradients instead of a border with pseudo elements, but I’ve come across something I just can’t get around. If you get the chance, [take a look at this pen I put together](http://codepen.io/ChrisPlz/pen/opxIj “”), in both Firefox and Chrome browsers. The issue I’m having is with the :after pseudo element. No matter how I adjust the degree of the gradient, or swap out the order of the colors, I can only seem to get it right on one browser or the other. Any suggestions?

    # December 18, 2012 at 9:04 pm

    Setting :after’s gradient at 135deg works for me. (Chrome & Firefox). Can you take a screenshot of what you’re looking to achieve? I might be thinking you’re aiming for something you’re not.

    # December 18, 2012 at 9:16 pm

    135deg doesn’t display properly in my Firefox, http://i46.tinypic.com/1on4eo.png

    I’ve tried reordering the colors and rotating the degree (-45 all the way to 315), but nothing seems to do the trick in both browsers

    # December 18, 2012 at 9:20 pm

    are you using the latest Firefox?

    # December 18, 2012 at 9:21 pm

    @wolfcry911, yep, 17.0.1

    and Windows, for what it’s worth

    # December 18, 2012 at 9:23 pm

    Works on OS X 10.8.2 with FF 17.0.1

    # December 18, 2012 at 10:10 pm

    @ChrisP – I think it’s just one of those shrug moments really, the code is fine so from what I can see it’s a browser bug, unless someone can see something I can’t?

    While not exactly an ideal fix, maybe an image/svg fallback as a solution?

    # December 18, 2012 at 11:31 pm

    Thanks @andy_unleash, I was also thinking about possibly applying the same gradient and degree to :before and :after, but then using `transform: scaleX(-1)` to the :after

    # December 19, 2012 at 5:33 am

    It’s not a browser bug. Firefox uses the latest syntax, Chrome does not. It’s solvable, but you would have to make sure you use the appropriate syntax for each prefix.

    # December 19, 2012 at 8:28 am

    Thanks @joshuanhibbert, but according to [https://developer.mozilla.org/en-US/docs/CSS/linear-gradient#Gradient_at_a_45_degree_angle](https://developer.mozilla.org/en-US/docs/CSS/linear-gradient#Gradient_at_a_45_degree_angle “”) my syntax of `-45deg, darkgreen, green 50%, transparent 50%` should do the trick. That works in webkit, not in moz..

    Unless I’m missing something?

    I understand I’ll have to use different syntax for the prefix’s but according to the link, the gradient I have should be working… [here’s a pen with -45deg](http://codepen.io/ChrisPlz/pen/opxIj “”)

    # December 19, 2012 at 9:08 am

    Very odd indeed. Though it’s a tad bit more code, you could just add the -moz- prefix after your `@include`, as such:

    &:after {
    @include background-image(linear-gradient(-45deg, darkgreen, green 50%, transparent 50%));
    background-image: -moz-linear-gradient(-45deg, darkgreen, green 50%, transparent 50%);
    right: 0;
    }

    It will do the trick for Firefox, only thing I can think of really.

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

You must be logged in to reply to this topic.

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