Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
CSS Breadcrumb tutorial
Nowadays with the new possibilities of CSS like transitions, transformations, gradients and so on, many things we used to do with a combination of code and images are now possible with bare code.
Recently I was looking for a way to create a series of breadcrumb buttons with arrows incorporated. I found many tutorials that explained me how to create small triangular arrows in one color using CSS-borders, but none that showed me how to create buttons with gradients that incorporated the arrow. I decided to code it myself. You can find the result below.
Step 1: Basic buttons.
Creating a series of buttons with gradients and shadows is fairly easy and straightforward. I’m using a combination of div’s and span’s, but you might as well use a list with list-items.
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 12px;
}
body {background-color: #d3d7cf;}
#breadcrumbs {
display: inline-block;
margin: 10px;
border-radius: 10px;
box-shadow:0 0 1px rgba(0,0,0,0.5);}
.button {
display: inline-block;
cursor: pointer;
margin-right: -3px;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(top, #729fcf, #3465a4);
background: -o-linear-gradient(top, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
}
.button:hover {
background-color: #3465a4;
background: -moz-linear-gradient(bottom, #729fcf, #3465a4);
background: -o-linear-gradient(bottom, #729fcf, #3465a4);
background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4));
box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);}
.button:first-child {border-radius: 10px 0 0 10px;}
.button:last-child {border-radius: 0 10px 10px 0;}
.label {
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
color: white;
height: 30px;
padding: 8px;
-moz-user-select: none;
-webkit-user-select: none;
display: inline-block;
}
.button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;}
.button:first-child .label {padding-left: 15px;}
.button:last-child .label {padding-right: 15px;}
.button:last-child .arrow {display: none;}
<div id="breadcrumbs">
<div class="button">
<span class="label">Start</span>
</div>
<div class="button">
<span class="label">Products</span>
</div>
<div class="button">
<span class="label">Colors</span>
</div>
<div class="button">
<span class="label">White</span>
</div>
</div>
Step 2: Creating the arrow
In order to create a triangular arrow with a gradient, we use CSS transformations and simple clipping.
First we create a span and rotate it 45deg. We apply the same gradients that we used in step 1, but with an angle of 135deg.
We encapsulate the rotated span in another one and adjust dimensions, overflow and margin so that only half of the rotated span is shown. This gives us the illusion of triangle with a gradient and shadow.
.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;}
.arrow span {
border-radius: 5px;
width: 24px;height: 24px;
display: inline-block;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
margin-left: -13px;
margin-top: 3px;
box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
background: -o-linear-gradient(135deg, #3465a4, #729fcf);
background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf));
}
.arrow:hover span {
background-color: #3465a4;
background: -moz-linear-gradient(135deg, #729fcf, #3465a4);
background: -o-linear-gradient(135deg, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf));
box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25);
}
<span class="arrow"><span></span></span>
Step 3: Bringing everything together
We place the arrow-span inside the button after the label and apply a few paddings and margins.
- Give .arrow a margin-left of -5px.
- Change .arrow:hover to .button:hover .arrow.
- Give .label a padding-left of 25px and .button a margin-right of -20px
- Give #breadcrumbs a padding-right of 18px.
Final Code
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 12px;
}
body {background-color: #d3d7cf;}
#container
{
width: 285px;
margin: 0 auto;
margin-top: 23%;
}
#breadcrumbs {
display: inline-block;
margin: 10px;
padding-right: 18px;
border-radius: 10px;
box-shadow:0 0 1px rgba(0,0,0,0.5);
}
.button {
display: inline-block;
cursor: pointer;
margin-right: -20px;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(top, #729fcf, #3465a4);
background: -o-linear-gradient(top, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
}
.button:hover {
background-color: #3465a4;
background: -moz-linear-gradient(bottom, #729fcf, #3465a4);
background: -o-linear-gradient(bottom, #729fcf, #3465a4);
background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4));
box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);}
.button:first-child {border-radius: 10px 0 0 10px;}
.button:last-child {border-radius: 0 10px 10px 0;}
.label {
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
color: white;
height: 30px;
padding: 8px;
-moz-user-select: none;
-webkit-user-select: none;
display: inline-block;
padding-left: 25px;
}
.button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;}
.button:first-child .label {padding-left: 15px;}
.button:last-child .label {padding-right: 15px;}
.button:last-child .arrow {display: none;}
.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;margin-left: -5px;}
.arrow span {
border-radius: 5px;
width: 24px;height: 24px;
display: inline-block;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
margin-left: -13px;
margin-top: 3px;
box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
background: -o-linear-gradient(135deg, #3465a4, #729fcf);
background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf));
}
.button:hover .arrow span {
background-color: #3465a4;
background: -moz-linear-gradient(135deg, #729fcf, #3465a4);
background: -o-linear-gradient(135deg, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf));
box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25);
}
The result was achieved with trial and error and is not completely pixel perfect. Since you can’t use floating point pixels, the height of the arrow may or may not fit perfectly. If you want other dimensions, you’ll have to try it out. Nonetheless it think the result is quite allright.
You could also use skewing in CSS to make your arrow look less sharp.
Any comments or feedback are always welcome!
I’m a Creative, artistic, spiritual IT’er that loves to dance, teach and enjoy life @ the fullest!, I’m also a full-time teacher in IT and Religion. When I’m not teaching, I’m designing websites and web apps or you can find me bboying with some friends.
June 6th
I personally think that CSS is really useful. I am very thankful I came here. How important is CSS really? Thank you very much for sharing this css tutorial.
-Jhelle
June 7th
Thanks you Jhelle, CSS is very useful and lightway, in this and our other sites we try to use CSS as much as we can. Take care!
June 14th
Using CSS instead of f.e. images makes your website lighter in terms of bytes to download, and more flexible. In this case, you don’t need to create a new image everytime you want a new button.
June 9th
I’m slowly getting the hang of it. Thanks for the tutorial This is very useful. :)
June 11th
Thanks for this tutorial Tom. It’s great to learn this all from you. I’m not yet familiar to all of these, but I’m learning more of it. I hope I can see more of tutorials in your future post.
June 14th
Thank you for your kind words. As I said, this was mostly trial and error. When new CSS-possibilities arise, it’s just like playing with new lego-bricks, testing what you can build with the same bricks over and over again. If you have any specific questions, don’t hestitate to contact me about it here in the comments or through social media like twitter. I’ll be happy to help or try to explain it.
June 12th
Thanks for this cool tutorial for creating breadcrumb buttons using just CSS. The use of CSS transformations and border radius to create the arrow shape of the button works really well and shows the potential of what is possible when using just CSS. It also shows how the need to use images for buttons is becoming less necessary.
June 14th
With the amount of things we can do using just CSS it is becoming less necessary to use images. Evidently using less images will make your site run faster. Best wishes!
June 14th
In addition I tend to only use .svg-files. Totally scallable, even in IE9 with a small hack.
June 14th
Thanks for the tutorial. I’m slowly getting the hang of it. This is a great help!
June 14th
That’s cool, there’s a lot to learn from this tutorial. Best wishes.
June 14th
I’m happy to hear you’re learning from it. If you have any specific questions, or something is unclear, don’t hesitate to contact me!
June 15th
Thank you for sharing this tutorial. I badly needed this now.
June 23rd
I am a newbie but I am determined to master CSS thanks for the tut!
June 25th
We’re glad for that Sarah, please keep visiting us to improve your skills.
October 2nd
That must have been a hell of an effort to get this done! Nice breadcrumb, really. But concerning real-world webdesign and -development, this is (sadly, sadly) not as useful. Tried watching the jsfiddle in IE9 and then switching browser compatibility mode downward up to IE7? One can literally feel the browser getting more and more uncomfortable, as the browser version decreases.
There’s way too much IE users in this world. One would have to set up another menu for IE users, i guess.
But thanks for sharing, nice to see what’s possible :)
January 21st
There’s plenty off possibilities available for CSS, but, as you noted, much of the stuff is still not working for IE. We’ll have to wait for new releases which can better handle those issues.
January 21st
When degrading to IE older than version 9, it doesn’t work as you say, but I stopped designing for the past a while ago. I always ensure full functionality, possibly with other code, so that all users can still use it and at the same upgraded users can get a better experience.
On the other hand, numbers are dropping for IE older than version 9 and major companies like Google is dropping support for them.
Although everyone is entitled to choose it’s browser, using an outdated one can be dangerous, so encouraging these users to upgrade is a good thing I guess.
I’m using these breadcrumbs in a UI-framework I build for my school. My IT-Collegues are using it to build new webapplications for my collegues and students. There is a minimal limit of IE9.
Although it’s the same codebase, a webapp is different from a website for me. For a webapp, you can demand a certain platform.
Anyway, thanks for your nice comment!
February 18th
Thanks for your valuable informations about software training, I am working in FNT Web School Bangalore, Our is an one of the best Software Training School in Bangalore
April 10th
Hi Kris! Thanks for your feedback. Stay tuned.
March 26th
thanx for ur help…..
April 10th
Thank you! Stay tuned for our future posts. Cheers.
CSS Breadcrumb tutorial http://t.co/WWJV9e4d Pls RT #showcase
RT @WebDesignShock: CSS Breadcrumb tutorial http://t.co/gGl6UyoS Pls RT #showcase
RT @xelagc: Interesting RT @mlane: CSS Breadcrumb tutorial http://t.co/cfJtqUW8 #development #programming #webDesign
RT @WebDesignShock: CSS Breadcrumb tutorial http://t.co/gGl6UyoS Pls RT #showcase
.. how to create buttons with gradients that incorporated the arrow ~ CSS Breadcrumb tutorial – @WebDesignShock http://t.co/XulqLPn4
CSS Breadcrumb tutorial http://t.co/jBgePkUc
CSS Breadcrumb tutorial http://t.co/zNzAiZoS via @zite
CSS Breadcrumb tutorial http://t.co/1k87mHzu via @zite
RT @WebDesignShock: CSS Breadcrumb tutorial http://t.co/gGl6UyoS Pls RT #showcase
CSS Breadcrumb tutorial http://t.co/GoiP9zvX via @webdesignshock
Excellent didacticiel pour créer un fil d’ariane en HTML / CSS3 (avec préfixes) sans images » CSS Breadcrumb Tutorial : http://t.co/EjdqKG8C
CSS Breadcrumb tutorial – WebDesignShock http://t.co/2itY6VD0
CSS Breadcrumb tutorial http://t.co/V6TdIbBA via @webdesignshock
CSS Breadcrumb tutorial – WebDesignShock – http://t.co/mT6oPSXM
RT @JuanjoBernabeu: CSS Breadcrumb tutorial – WebDesignShock – http://t.co/mT6oPSXM
RT @JuanjoBernabeu: CSS Breadcrumb tutorial – WebDesignShock – http://t.co/mT6oPSXM
#CSS Breadcrumb tutorial – WebDesignShock http://t.co/zgio0je5
CSS Breadcrumb tutorial – WebDesignShock http://t.co/b4iwuiKU
CSS Breadcrumb tutorial – http://t.co/CaAzBh6H
RT @NoupeMag: CSS Breadcrumb tutorial – http://t.co/CaAzBh6H
RT @NoupeMag: CSS Breadcrumb tutorial – http://t.co/CaAzBh6H
RT @NoupeMag: CSS Breadcrumb tutorial – http://t.co/Kq7BgRNj
CSS Breadcrumb tutorial – WebDesignShock http://t.co/9yVHXBSk
CSS Breadcrumb tutorial http://t.co/PyxcCSPP via @webdesignshock
RT @nick_supremacy: Excelente tutorial #CSS3 para mejorar la navegabilidad de tu sitio web – http://t.co/eX5VQ01F #navegacion #UI #webdesign
Excelente tutorial #CSS3 para mejorar la navegabilidad de tu sitio web – http://t.co/C6NQEcIh #navegacion #UI #webdesign