7 Responses

  1. Julie Ann Horvath Julie Ann Horvath

    Working on cleaning up an internal tool's header, adding some things.

    A while ago I gisted some CSS for faded gradient borders using the experimental (and mostly only webkit) border-image attribute.

    Couldn't get that one to work today, so I wrote a more gracefully degraded (and firefox friendly) version you can steal here.

    See the old gist here.

    over 1 year ago

  2. Derek Punsalan Derek Punsalan

    Why not insert that gradient divider :after the link instead of using the extra span? I was just messing around with it here:

    Firefox on my computer seemed to load it fine, as did Chrome and Safari.

    over 1 year ago

  3. Julie Ann Horvath Julie Ann Horvath

    @Derek Punsalan That works too! This is a cool way of implementing it.

    I just try to write less css when I can. And I'm only styling just the one element here, but this is excellent. Nice job!

    over 1 year ago

  4. Mark Otto Mark Otto

    Curious about your decision of using the blues in the gradient vs simply providing a transparent background-color of say rgba(0,0,0,.1);. Wouldn't the blending pick up the gradient beneath and properly "fade" as intended, or are you going for something much more fine-grained?

    over 1 year ago

  5. Julie Ann Horvath Julie Ann Horvath

    @Mark Otto Wanted to flip the gradient from dark to light to darken it up a bit. Not even sure if that makes sense, because this looks good too, as long as I bump the highlight up a little: Do you have a preference? Aka does my version even make sense?

    Also, what do you think after using a pseudo element on the anchor instead of a separate element?

    over 1 year ago

  6. Mark Otto Mark Otto

    I prefer the background-color approach over a gradient:

    * Less code, the better
    * Scales to work automatically with almost any background color (blue, red, green, black, etc)
    * Has same browser support (better, actually) as your gradient approach as it stands now

    Pseudo element is cool because it's less markup, but as always it's a tradeoff: browser support or markup? Since it's an internal tool, you can use a pseudo element given everyone uses fancy browsers. If it's a repeatable component outside the nav links (say, .divider-vertical), make it a span or something.

    over 1 year ago

  7. Austin Bales Austin Bales

    @Julie Ann Horvath I much prefer the `:after` option because it keeps your markup more meaningful. Details like this one seem firmly in the domain of the stylesheet. We actually implemented ridgy dividers with an :after pseudoselector until yesterday, when we removed them all together.

    @Mark Otto makes a good point about its potential as a repeatable element – you could also consider using a decorative class or tooling like Sass/Less to minimize the impact on markup and layout.

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like