Wednesday, October 24, 2012

CSS arrow breadcrumb


I am going to show how to get the attached arrow breadcrumb as shown in the below image.




This breadcrumb contains no images so that it is easy to expand the menu based on the length of the word and it minimizes the loading time of the images.

Here we start, 

HTML

<ul id="breadcrumbs-one">
        <li><a href="">Test Link 1</a></li>
        <li><a href="">Test Link 2</a></li>
        <li><a href="">Test Link 3</a></li>
        <li><a href="">Test Link 4</a></li>
        <li><a href="" class="current">Test Link 5</a></li>
 </ul>   

CSS 
    
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }    
    #breadcrumbs-one{
      background: #000;
      border-width: 1px;
      border-style: solid;
      border-color: #f5f5f5 #e5e5e5 #ccc;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
      -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
      box-shadow: 0 0 2px rgba(0,0,0,.2);
      /* Clear floats */
      overflow: hidden;
      width: 100%;
    }    
    #breadcrumbs-one li{
      float: left;
    }    
    #breadcrumbs-one a{
      padding: .7em 1em .7em 2em;
      float: left;
      text-decoration: none;
      color: #fff;
      position: relative;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
      background-color: #ddd;
      background-image: -webkit-gradient(linear, left top, right bottom, from(#f5f5f5), to(#ddd));
      background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);
      background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);
      background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);
      background-image: -o-linear-gradient(left, #f5f5f5, #ddd);
      background-image: linear-gradient(to right, #f5f5f5, #ddd);  
    }    
    #breadcrumbs-one li:first-child a{
      padding-left: 1em;
      -moz-border-radius: 5px 0 0 5px;
      -webkit-border-radius: 5px 0 0 5px;
      border-radius: 5px 0 0 5px;
    }    
    #breadcrumbs-one a:hover{
      background: #000;
    }    
    #breadcrumbs-one a::after,
    #breadcrumbs-one a::before{
      content: "";
      position: absolute;
      top: 50%;
      margin-top: -1.5em;   
      border-top: 1.5em solid transparent;
      border-bottom: 1.5em solid transparent;
      border-left: 1em solid;
      right: -1em;
    }    
    #breadcrumbs-one a::after{ 
      z-index: 2;
      border-left-color: #ddd;  
    }    
    #breadcrumbs-one a::before{
      border-left-color: #ccc;  
      right: -1.1em;
      z-index: 1; 
    }    
    #breadcrumbs-one a:hover::after{
      border-left-color: #000;
    }    
    #breadcrumbs-one .current,
    #breadcrumbs-one .current:hover{
      font-weight: bold;
      background: none;
    }    
    #breadcrumbs-one .current::after,
    #breadcrumbs-one .current::before{
      content: normal;  
    }​

This gives the result as shown in the sample image above.

VIEW RESULT

Thursday, October 4, 2012

CSS3 BG Patterns


Its time to say bye to bg images as html body background. CSS3 has super cool properties to create different types of creative bg patterns, absolutely image free.

We can achieve this by using CSS3 properties like gradient, transparent etc..

Here are few samples

1.   http://jsfiddle.net/XfsR6/

div{
background-size50px 50px;
background-color#c16height:500px;
background-image-webkit-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-moz-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-ms-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-o-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
}




2.    http://jsfiddle.net/ryy6c/1/

div{
    background-color#c16height:500px;
background-color#eee;
background-size60px 60px;
background-position030px 30px;
background-image-webkit-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -webkit-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-moz-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -moz-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-ms-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -ms-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-o-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -o-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-imagelinear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
-pie-backgroundlinear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black60px,
                 linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black30px 30px 60px,
                 #eee;
behaviorurl(/PIE.htc);
}




3. http://jsfiddle.net/XfsR6/1/

div{
background-color#c16height:500px;
background-size50px 50px;
background-color#0ae;
background-image-webkit-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-moz-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-ms-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-o-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-imagelinear-gradient(rgba(255255255.250%transparent 50%transparent);
-pie-backgroundlinear-gradient(rgba(255255255.250%transparent 50%transparent50px #0ae;
behaviorurl(/PIE.htc);
}




P.S - Dont forget to use CSS PIE method as mentioned in my previous post.