• 1
  • 2
Home > Tips

Breadcrumbs CSS - CSS Breadcrumbs Example Free Download

 

 

Breadcrumbs CSS is a common and frequently-used UI effect for website. However, most of the CSS breadcrumbs examples you guys see may be common and ordinary (I didn't mean any offense). Have you seen some gorgeous animation CSS breadcrumbs examples?

Through this article, I will share a creative animation CSS breadcrumbs example with you and will also show you the HTML and CSS structures of the CSS breadcrumbs example. You can free download the CSS breadcrumbs example and then edit it for you own use. 

Below is the CSS breadcrumbs example that Id like share with you. Please click the [View the demo] link to preview it or you can click the [Download the demo] link to free download it directly. 

                                                         [View the demo]                 [Download the demo] 



 The HTML Structure of the CSS Breadcrumbs Example

 <ul class='nav_block clearfix item1'>
  <li><a href='#' class='active'><i>Home</i></a></li>
  <li><a href='#'><i>Main Category</i></a></li>
  <li><a href='#'><i>Sub Category</i></a></li>
  <li><a href='#'><i>Item</i></a></li>
</ul>
<ul class='nav_block clearfix item2'>
  <li><a href='#' class='active'><i>Home</i></a></li>
  <li><a href='#'><i>Main Category</i></a></li>
  <li><a href='#'><i>Sub Category</i></a></li>
  <li><a href='#'><i>Item</i></a></li>
</ul>


 

 The CSS Structure of the CSS Breadcrumbs Example

 .demo {
   width: 500px;
  margin: 0 auto;

.nav_block {
  margin-top: 40px;
  float: left;
  border-width: 1px;
  border-style: solid;
  border-color: #dedede transparent #b5b4b0 #c6c6c5;
}
.nav_block li {
  float: left;
  text-shadow: 0 1px 0 #fff;
  background-color: #e6e6e6;
}
.nav_block li a {
  position: relative;
  display: block;
  color: #7d7c7c;
  padding: 0 25px;
  height: 40px;
  line-height: 40px;
}
.nav_block li a:before {
  position: absolute;
  font-family: 'entypo';
  font-style: normal;
  speak: none;
  font-weight: normal;
  font-smoothing: antialiased;
  font-size: 22px;
  margin-right: 8px;
  text-indent: 8px;
  z-index: 3;
  transform: translateY(-60px);
}
.nav_block li a:after {
  position: absolute;
  top: 5px;
  right: -14px;
  content: '';
  width: 32px;
  height: 35px;
  box-shadow: 0 1px 0 #c6c6c5 inset,-1px 0 0 #c6c6c5 inset, 1px 0 0 #fff,0 -1px 0 #fff;
  background-color: #e6e6e6;
   clip: rect(-1px 31px 29px 1px);
  transform: rotate(45deg);
  z-index: 2;
}
.nav_block li a:hover,
  .nav_block li .active { 
  text-decoration: none;
  margin: -1px;
}
.item1 li a:hover,
  .item1 li .active {
  color: #aa1010;
  text-shadow: 0 1px 0 #f28383;
  border:1px solid #e00e0e;
  box-shadow: 0 1px 0 #f17a7a inset;
  background-color: #eb4141;
}
.item2 li a:hover,
  .item2 li .active {
  color: #825812;
  text-shadow: 0 1px 0 #fff9ee;
  border:1px solid #edb524;
  box-shadow: 0 1px 0 #ffd692 inset;
  background-color: #ffc15b;
}
.nav_block li a i {
  display: inline-block;
  font-style: normal;
}
.nav_block li a:not(.active):hover i {
  animation: moveText 300ms ease;
  padding-left: 45px;
  font-size: 18px;
}
.item1 li a:not(.active):hover:after,
  .item1 li .active:after {
  background-color: #eb4141;
  box-shadow: 0 1px 0 #e00e0e inset,-1px 0 0 #e00e0e inset, 1px 0 0 #d4aead,0 -1px 0 #d4aead;
}
.item2 li a:not(.active):hover:after,
  .item2 li .active:after {
  background-color: #ffbd51;
  box-shadow: 0 1px 0 #e6b42e inset,-1px 0 0 #e6b42e inset, 1px 0 0 #d4aead,0 -1px 0 #d4aead;
}
.nav_block li:nth-child(1) a:before {
  content: '\e00c';
}
.nav_block li:nth-child(2) a:hover:before {
  content: '\e02d';
}
.nav_block li:nth-child(3) a:hover:before {
  content: '\e01f';
}
.nav_block li:nth-child(4) a:hover:before {
  content: '\e036';
}
.nav_block li a:not(.active):hover:before {
  transform: translateY(0px);
  animation: moveIcon 300ms ease;
  font-size: 30px;
}
.nav_block li .active {
  font-size: 0;
}
.nav_block li .active:before {
  text-indent: -8px;
  transform: translateY(0px);
}
.nav_block li .active:after {
  right: -15px;
}
.nav_block li .active:hover:before,
  .nav_block li .active:hover i {
  animation: none;
}
@keyframes moveText {
   from {
      transform: translateY(80px);
      opacity: 0.1;
   }
   to {
      transform: translate(0);
      opacity: 1;
   }
}
@keyframes moveIcon {
   from {
      transform: translateY(-80px);
      opacity: 0.1;
   }
   to {
      transform: translate(0);
      opacity: 1;
   }
}
@font-face {
  font-family: 'entypo';
  src:url('fonts/entypo.eot');
  src:url('fonts/entypo.eot?#iefix') format('embedded-opentype'),
    url('fonts/entypo.svg#entypo') format('svg'),
    url('fonts/entypo.woff') format('woff'),
    url('fonts/entypo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



 Terms and Rules 

It is absolutely free to download and use the CSS breadcrumbs example, there is no specific terms and rules to download and use it.

If you have problem downloading or editing the CSS breadcrumbs example, please feel free to contact our technical support team at support@slicemaker.com. We promise to you we can solve whatever problem you are having within 24 hours. Just enjoy the free CSS breadcrumbs example. 



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0