Grow your CSS skills. Land your dream job.

CSS Navigation Menu Style

  • # November 9, 2012 at 3:56 pm

    Hi all,

    I’ve been working on a menu style that has me stumped. I’ve set up a jsfiddle [here](http://jsfiddle.net/thatschris/SQgC9/ “jsfiddle.net”) rather than trying to explain it. Currently, my menu is like the menu in the fiddle, the look I’m going for is the green div below, with the curved tab look. I’ve been trying to use a radial gradient, rather than a linear gradient, but I can’t seem to get the positioning down, and everywhere I turn, I can’t seem to find clear cut syntax for a radial gradient.

    I’ve also considered using a :before or :after pseudo-element, and using Lea Verou’s [inverted border radius](http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ “Beveled Corners and Inverted Border Radius”) to accomplish the look, but I’ve read that there can be problems using psuedo-elements and transitions…any help would be appreciated!

    Thanks!

    # November 9, 2012 at 4:22 pm

    Do you have a link to a site that uses this menu style because I can’t tell what it is you are trying to achieve.

    In the meantime, I don’t know if this will help: http://css-tricks.com/tabs-with-round-out-borders/

    # November 9, 2012 at 4:26 pm

    I don’t have a link to a site that uses this menu, except the one I’m currently working on.. [http://basspimprecords.com](http://basspimprecords.com “basspimprecords.com”)

    I had the linear gradient like in the fiddle, but I’ve been trying to get the look done using radial gradients, so that’s what’s in place now

    Also, I thought about using the technique in the link you posted, but found Lea Verou’s to be a better option, as there’s no colored element to create the curve, I used Lea Verou’s inverted radius technique to create the curve look on the search bar

    To summarize, I’d just like a border radius on the top right corner, which can’t be done using a linear gradient, and since webkit doesn’t support transitions for pseudo elements, using the css-tricks and lea verou’s solution aren’t options..

    I feel like a radial gradient is an option, but I can’t wrap my head around the syntax, can’t find a way to position it properly, and it seems everywhere I look for proper radial gradient syntax gives me different options for position, and none of them seem to work how I need it to.

    # November 9, 2012 at 4:55 pm

    I think your fiddle must be incomplete because it looks nothing like your site.

    I’ll have a think though.

    # November 9, 2012 at 4:55 pm

    Yea, I just threw it together quickly..the site has box-shadows as well, and the site has the radial gradient in place still, while the fiddle has the linear gradient, which was my original idea..

    # November 9, 2012 at 5:01 pm

    Basically, not going to happen with a radial gradient, I feel…not with a straight line in there.

    Hmmm.

    # November 9, 2012 at 5:36 pm

    Yea, I understand I’d lose the right border, but my thought was that if I had the perfectly (over)sized vertical ellipse gradient, with a center position just outside the element (not sure if there’s syntax to position it with negative em’s or percentages), with the top of the gradient touching the top left corner of the element, I could get just enough curve to give the tab look. Not ideal, but I’m trying to avoid using an image.

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

You must be logged in to reply to this topic.

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