Forums

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

Home Forums CSS How to do angled navigation?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #33592
    mikes02
    Participant

    http://www.ngenworks.com/

    I have seen this more and more lately where sites are using angled navigation, how is this being accomplished?

    #83764
    Sinetheta
    Member

    They faked it. That page is one step away from an image map.

    #83766
    mikes02
    Participant

    So how did they fake it? Did they actually use image maps?

    #83767
    TheDoc
    Member

    They haven’t “faked” anything, the nav is just images.

    #83771
    Sinetheta
    Member

    What exactly would you define as “fake”. They have replaced content with pictures-of-altered-content.

    nav li a, #util-email a {
    text-indent: -9999px;}

    That line means the nav is “fake”.

    I’m pretty sure we can assume that since this post was made to CSS-Tricks, the OP was hoping to discover some new css tilt property, or maybe a neat script.

    I could print my website, crumple the paper, take a picture, and use that image to replace off the content. It doesn’t mean I’ve created a “cool new web technique”.

    #83772
    chrisburton
    Participant

    It’s called image replacement not fake. Use transform: rotate(#deg)

    #83798
    mikes02
    Participant

    I am perfectly aware of CSS image replacement techniques for navigation, I just haven’t seen it angled like that where the anchor tag wraps perfectly around the link, as far as I have always understood it when replacing an anchor text with an image you have to specify a width and height for that image, so on an angled image the dimensions of the anchor tag wouldn’t wrap it perfectly, they would be wider, if that makes sense. I just wasn’t sure how they did image replacement, tilted the images and still had the anchor wrap perfectly around the element so there’s no extra anchor spacing on either side of the graphic.

    #83799
    TheDoc
    Member

    It’s still a rectangle. I would recommend either using Firebug or Chrome’s built in developer tools to get an idea of how this is being accomplished. It’s not perfectly wrapped around the text, it’s just really tight to it.

    http://grab.by/aAC7

    #83816
    sliver37
    Member

    Yeah they use image sprites, first time I have heard of that being classified as doing it “fake” but as has already been mentioned CSS transform will do the same thing without images, just not going to work completely cross-browser.

    And flag rahul for his horrible design advice ..also spam. ;)

    #83903
    TheDoc
    Member

    @sl1dr it’s actually a different browser altogether. I use Rockmelt, it’s built on the Chrome browser.

    #83812
    Rob MacKay
    Participant

    Yea – You can use CSS Transform for cool effects like that – best thing about the CSS transform is that in versions of IE and other non-compatible browsers it just dosen’t transform so it’s just not slanted :)

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.