Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Navigation Menu Style

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #40720
    ChrisP
    Participant

    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!

    #113866
    Paulie_D
    Member

    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: https://css-tricks.com/tabs-with-round-out-borders/

    #113868
    ChrisP
    Participant

    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.

    #113872
    Paulie_D
    Member

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

    I’ll have a think though.

    #113873
    ChrisP
    Participant

    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..

    #113875
    Paulie_D
    Member

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

    Hmmm.

    #113878
    ChrisP
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.