How to do angled navigation?

[mikes02]

http://www.ngenworks.com/

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

[Sinetheta]

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

[mikes02]

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

[TheDoc]

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

[Sinetheta]

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

[chrisburton]

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

[mikes02]

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.

[TheDoc]

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

[sliver37]

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

[TheDoc]

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

[Rob MacKay]

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 :)

[Author]

Posts