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
Why not insert that gradient divider :after the link instead of using the extra span? I was just messing around with it here: http://dabblet.com/gist/3507536
Firefox on my computer seemed to load it fine, as did Chrome and Safari.
@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!
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?
@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: http://cl.ly/J57p 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?
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.
@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.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter