Animated CSS breadcrumbs design

by Posted on

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.

Published by admin