CODEWITHSUNDEEP
htmlcssgradientpsd
NativeCoder
NativeCoder

Reputation: 1053

Can I make this breadcrumb using css3?

I have been trying to make this PSD using CSS?

enter image description here

So far I have reached this. Can I achieve this design using CSS3 or do I have to use old school background image method?

Upvotes: 5

Views: 1566

Answers (3)

Jules
Jules

Reputation: 14520

This seems like a relatively simple CSS project; simple, here, being relative, as I've seen people make an animated Twitter Fail Whale with CSS alone.
What you're going to have to do for the triangle edges (which I assume is the tricky part for you), is use the CSS matrix transform (elaborated on at W3Schools), and then just use box-shadow for the borders, and box-shadow: inset for the inset effect. Afterwards, just use appropriate padding and text alignment to get the text centred in each part of the object.

EDIT Consider using the before and after pseudo elements to achieve this. Alternatively, you can use two skewed <div>s stacked on top of eachother for each section; however, this wouldn't give you an attractive shadow.

Upvotes: 2

Jon Egeland
Jon Egeland

Reputation: 12613

In short, yes this is possible with CSS alone (without CSS2 even), but I would urge you to use background images instead.

Ranting

The problem with doing CSS like this is shadows. The way it renders the triangle is just a border that is transparent on the diagonal sides. In other words, your shadow would still be a box and would not look the way you want it to.

I see this a lot with people starting to use CSS3. They normally want everything done dynamically instead of with background images. And once it's done, there's this slew of CSS that barely does anything aesthetically for the page. In reality, it only takes 10-15% of what they end up with to achieve the same effect with images.

There isn't any problem with background images, they aren't going out of style, and they certainly won't stop working any time soon. My advice, stick with background images for what needs an image, and save CSS3 for special effects. It sounds boring and old-school, but it works and is a whole lot easier.

Upvotes: 5

Joyce Babu
Joyce Babu

Reputation: 20654

I don't think it is possible with CSS alone. You will have to make use of background image. You will be able to create the tapered edge effect using :after and :before psuedo classes. But will face problem with the inside shadow.

I once tried to create a similar breadcrumb using css3 alone when I saw the breadcrumb in Google Help Center (which is similar, but using background image), but was not able to do it.

http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354760

I tried to do it with CSS (:after and :before) pseudo elements, without adding any other html elements.

Upvotes: -1

Related Questions