Animated CSS breadcrumbs design

Yet another breadcrumbs design purely made on CSS with awesome on hover effect. If your website looks more dynamic and you uses lot’s of effect to to make it unique then you must use this breadcrumbs design with your website which makes your web page look and feel more attractive.

Animated CSS breadcrumbs design

HTML

<div class="cont_principal">
<div class="cont_breadcrumbs">
 
<div class="cont_breadcrumbs_1">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Tow</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul>
 
  </div>  
 
 
<div class="cont_breadcrumbs_2">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Tow</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul>
 
  </div>  
 
<div class="cont_breadcrumbs_3">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Tow</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul>
 
  </div>  
 
  </div>
 
 
</div>


CSS

* {
  margin: 0px auto;
  text-align:center;
  padding: 0px;
  list-style: none;
  font-family: 'Open Sans';
}
 
.cont_principal {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(212,228,239);
background: -moz-linear-gradient(top,  rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
background: -webkit-linear-gradient(top,  rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%);
background: linear-gradient(to bottom,  rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=0 );
 
} 
 
.cont_breadcrumbs {
  width: 350px;
}
 
.cont_breadcrumbs_1 {
  position: relative;
  width: 100%;
  float: left;
  margin: 20px;
 
}
 
.cont_breadcrumbs_1 > ul > li {
  position: relative;
  float: left;
  transform: skewX(-15deg);  
  background-color: #fff;
box-shadow: -2px 0px 20px -6px rgba(0,0,0,0.5);
z-index: 1;
  width: 70px;
  margin-left: -50px;
transition: all 0.5s;
}
 
.cont_breadcrumbs_1 > ul > li  > a {
  display: block;
  padding: 10px;
  font-size: 20px;
 transform: skewX(15deg);
 text-decoration:none;
 color: #444;
font-weight: 300;
}
.cont_breadcrumbs_1 > ul > li:first-child {
 margin-left: 0px;
}
.cont_breadcrumbs_1 > ul > li:hover {
 background-color: #CFD8DC;
}
 
.cont_breadcrumbs_1 > ul > li:last-child {
  background-color: #78909C;
}
 
.cont_breadcrumbs_1 > ul > li:last-child > a {
  color: #fff;;
}
 
 
.cont_breadcrumbs_1 > ul:hover > li {
  margin-left: 0px;
}
 
 
.cont_breadcrumbs_2 {
  position: relative;
  width: 100%;
  float: left;
  margin: 20px 20px;
}
 
.cont_breadcrumbs_2 > ul > li {
  position: relative;
  float: left;
  transform: skewX(-15deg);  
  background-color: #fff;
box-shadow: -2px 0px 20px -6px rgba(0,0,0,0.5);
z-index: 1;
transition: all 0.5s;
}
 
.cont_breadcrumbs_2 > ul > li:hover {
 background-color: #CFD8DC;
}
 
.cont_breadcrumbs_2 > ul > li  > a {
  display: block;
  padding: 10px;
  font-size: 20px;
 transform: skewX(15deg);
 text-decoration:none;
 color: #444;
font-weight: 300;
}
.cont_breadcrumbs_2 > ul > li:last-child {
  background-color: #78909C;
  transform: skew(0deg);
margin-left: -5px;
 
}
 
.cont_breadcrumbs_2 > ul > li:last-child > a {
  color: #fff;
 transform: skewX(0deg);
}
 
 
 
 
 
.cont_breadcrumbs_3 {
  position: relative;
  width: 100%;
  float: left;
  margin: 20px 20px;
}
 
.cont_breadcrumbs_3 > ul > li {
  position: relative;
  float: left;
  transform: skewX(-15deg);  
  background-color: #fff;
z-index: 1;
transition: all 0.5s;
margin-left: 5px;
}
 
.cont_breadcrumbs_3 > ul > li:hover {
 background-color: #CFD8DC;
}
 
.cont_breadcrumbs_3 > ul > li  > a {
  display: block;
  padding: 10px;
  font-size: 20px;
 transform: skewX(15deg);
 text-decoration:none;
 color: #444;
font-weight: 300;
}
.cont_breadcrumbs_3 > ul > li:last-child {
  background-color: #78909C;
}
 
.cont_breadcrumbs_3 > ul > li:last-child > a {
  color: #fff; 
 
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by THEORLAN2. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.