CODEWITHSUNDEEP
jquerytabscss
WillingLearner
WillingLearner

Reputation: 7316

How do I make an angled tab interface with just jquery and css3?

This is my goal. Angled tabs with transparency on top of the other. How would i build this without using jpgs or pngs, but only css?

alt text

Upvotes: 5

Views: 1977

Answers (3)

David Storey
David Storey

Reputation: 30424

Does it have to be with CSS, or are you just hoping not to use raster images? You could for example use an SVG background image, which will likely be a smaller file size than a raster image and will scale better. You can use a data uri if you are worried about HTTP requests. You could also probably use an SVG or png as a border-image if you don't want to use background-image.

Upvotes: 1

Trufa
Trufa

Reputation: 40737

This tuts will get you going but I'll try to mockup something in a minute!

http://www.howtocreate.co.uk/tutorials/css/slopes

http://net.tutsplus.com/articles/news/fun-with-css-shapes/

BTW great question!

Edit:

Here is the "final" result:

alt text

See it here!

NOTE:

Just be aware that this is a "hack" and that it might not be the best idea to actually implement it, I think (can't try it now) IE has some issues with this, if you asked about usability and accessibility, I would say go with images :)

Upvotes: 1

Jakub
Jakub

Reputation: 20475

My take on this would be to use CSS to create angles: http://www.howtocreate.co.uk/tutorials/css/slopes or http://www.dinnermint.org/blog/css/creating-triangles-in-css/

You create the 'end' piece of the tab as an angle that is white / black, and then use jquery to apply transparency, and selection.

That should help you start without images.

Upvotes: 0

Related Questions