Minimal GUI Set: More Than 1000 Free Elements, Buttons, Patterns, Icons And Many More

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

CSS Breadcrumb tutorial

Comments and suggestions in here

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.

Facebook Twitter YouTube Vimeo 

48 Responses to “CSS Breadcrumb tutorial”

  1. Jhelle
    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

    • Blog1
      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!

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

  2. I’m slowly getting the hang of it. Thanks for the tutorial This is very useful. :)

  3. Junel
    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.

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

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

    • Blog1
      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!

    • In addition I tend to only use .svg-files. Totally scallable, even in IE9 with a small hack.

  5. Martin
    June 14th

    Thanks for the tutorial. I’m slowly getting the hang of it. This is a great help!

    • Blog1
      June 14th

      That’s cool, there’s a lot to learn from this tutorial. Best wishes.

    • 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!

  6. Kenneth
    June 15th

    Thank you for sharing this tutorial. I badly needed this now.

  7. Sarah Smith
    June 23rd

    I am a newbie but I am determined to master CSS thanks for the tut!

    • Blog1
      June 25th

      We’re glad for that Sarah, please keep visiting us to improve your skills.

  8. allyourbase
    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 :)

    • Designer
      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.

    • 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!

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

  10. thanx for ur help…..

  11. CSS Breadcrumb tutorial http://t.co/WWJV9e4d Pls RT #showcase

  12. RT @WebDesignShock: CSS Breadcrumb tutorial http://t.co/gGl6UyoS Pls RT #showcase

  13. RT @xelagc: Interesting RT @mlane: CSS Breadcrumb tutorial http://t.co/cfJtqUW8 #development #programming #webDesign

  14. RT @WebDesignShock: CSS Breadcrumb tutorial http://t.co/gGl6UyoS Pls RT #showcase

  15. .. how to create buttons with gradients that incorporated the arrow ~ CSS Breadcrumb tutorial – @WebDesignShock http://t.co/XulqLPn4

  16. RT @WebDesignShock: CSS Breadcrumb tutorial http://t.co/gGl6UyoS Pls RT #showcase

  17. CSS Breadcrumb tutorial http://t.co/GoiP9zvX via @webdesignshock

  18. Excellent didacticiel pour créer un fil d’ariane en HTML / CSS3 (avec préfixes) sans images » CSS Breadcrumb Tutorial : http://t.co/EjdqKG8C

  19. CSS Breadcrumb tutorial http://t.co/V6TdIbBA via @webdesignshock

  20. CSS Breadcrumb tutorial – WebDesignShock – http://t.co/mT6oPSXM

  21. RT @JuanjoBernabeu: CSS Breadcrumb tutorial – WebDesignShock – http://t.co/mT6oPSXM

  22. RT @JuanjoBernabeu: CSS Breadcrumb tutorial – WebDesignShock – http://t.co/mT6oPSXM

  23. RT @NoupeMag: CSS Breadcrumb tutorial – http://t.co/CaAzBh6H

  24. RT @NoupeMag: CSS Breadcrumb tutorial – http://t.co/Kq7BgRNj

  25. CSS Breadcrumb tutorial – WebDesignShock http://t.co/9yVHXBSk

  26. CSS Breadcrumb tutorial http://t.co/PyxcCSPP via @webdesignshock

  27. RT @nick_supremacy: Excelente tutorial #CSS3 para mejorar la navegabilidad de tu sitio web – http://t.co/eX5VQ01F #navegacion #UI #webdesign

  28. Excelente tutorial #CSS3 para mejorar la navegabilidad de tu sitio web – http://t.co/C6NQEcIh #navegacion #UI #webdesign

Leave a Reply

Comments

*