Treehouse: Grow your CSS skills. Land your dream job.

How to do angled navigation?

  • # July 21, 2011 at 2:50 pm

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

    # July 21, 2011 at 3:18 pm

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

    # July 21, 2011 at 4:33 pm

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

    # July 21, 2011 at 4:51 pm

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

    # July 21, 2011 at 6:08 pm

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

    # July 21, 2011 at 6:27 pm

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

    # July 21, 2011 at 6:52 pm

    @Sinetheta As far as I was aware, images are still content.

    @mikes02 If you wanted to use CSS then do exactly what @ChristopherBurton said. Just be aware that it doesn’t work across all browsers.

    # July 22, 2011 at 12:43 pm

    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.

    # July 22, 2011 at 12:55 pm

    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.

    # July 22, 2011 at 8:33 pm

    @TheDoc What extension gives you the righthand bookmarks bar in your screenshot?

    # July 23, 2011 at 7:46 am

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

    # July 24, 2011 at 4:34 pm

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

    # July 24, 2011 at 5:20 pm

    @TheDoc I’ll check it out, thanks.

    # July 26, 2011 at 5:25 am

    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 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.