thn google
+13,700
twitter big logo icone 5336 48
1,755
Advertisers Tag Here
Join over 45,931 Daily Readers, Users, Subscribers
..who get notifications via Emails !
Jobs

3 Sept 2012

BreadCrumb Design CSS ~ CloseBraces

Labels: , , , ,
Design 2 ~ CloseBraces
Lots Of website today use Breadcrumb in their website, It help audience to navigate easily through  your website. Not only it help you audience to navigate quickly, but also make your blog|website look better. and all we know that beautiful website attract traffic.

  • Make sure Your website have Breadcrumbs
  • Remove all the previous Breadcrumbs CSS Codes.from your website.
  • We have used common HTML structure. 

1<div class='breadcrumbs' >
2<a class='first' href='#' ><span>Home</span></a>
3<a href='#' ><span>CSS3</span></a>
4<a href='#' ><span>Widgets</span></a>
5</div>


.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
.breadcrumbs a:nth-child(even):hover{color:#333}
.breadcrumbs a:nth-child(odd):hover{color:#FFF}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:29!important}
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}