CSS Breadcrumb tutorial | Bypeople

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.

[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;}

#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>

[/code]

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.

[code]
.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>
[/code]

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

[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);
}

[/code]

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!



Related Deals


Related Posts