Breadcrumb на CSS3 без изображений

Два варианта создания хлебных крошек с использованием CSS3.
Работает в Firefox 3.0+, Chrome 5+, IE9, Safari 4+, Opera 11.

HTML

Разметка общая для двух вариантов, если не считать название идентификатора у списка:

    <ul id="breadcrumb"> 
        <li><a href="#">Новости</a></li>
        <li><a href="#">Software</a></li>
        <li><a href="#">Операционки</a></li>
        <li><a href="#">Linux</a></li>
        <li><a href="#">Ubuntu</a></li>
        <li><a href="#">Вышла новая версия ubuntu!</a></li> 
    </ul> 

CSS

Для первого варианта хлебных крошек.
Где используется:

• border-radius на правом краю
• transparent radial-gradient на левом краю
• одноуровневый селектор (~) при hover

#breadcrumb { 
        margin: 0; padding: 0; 
      } 
#breadcrumb li { 
        display: inline-block; /* affichage horizontal */ 
        position: relative;
        -webkit-transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        transition: opacity 1s;
      } 
#breadcrumb li + li {
    margin-left: -8px;
} 
#breadcrumb a {     
        display: inline-block;
        padding: 8px 28px; 
        margin: 0;        
        color: #333; 
        border: 1px solid #bbb; border-left: none;
        text-decoration: none;  
        text-shadow: 1px 1px 1px rgba(255,255,255,0.5);  
        -webkit-border-radius: 0 17px 17px 0 / 0 35px 35px 0;
        -moz-border-radius: 0 17px 17px 0 / 0 35px 35px 0;
        border-radius: 0 17px 17px 0 / 0 35px 35px 0;    
        background: #ccc;        
      } 
#breadcrumb li:hover ~ li  {
        opacity: 0.5;
}
#breadcrumb li:hover ~ li + li  {
        opacity: 0.2;
}
#breadcrumb a {
    background: -webkit-radial-gradient(-24px center, circle , transparent 30px, #ccc 32px);
    background: -moz-radial-gradient(-24px center, circle , transparent 30px, #ccc 32px);
    background: -o-radial-gradient(-24px center, circle , transparent 30px, #ccc 32px);
    background: radial-gradient(-24px center, circle , transparent 30px, #ccc 32px);
}
#breadcrumb a:hover, #breadcrumb a:focus {
        color: #000; 
        text-decoration: underline;
}

Для второго варианта.
Где используется:

• :before и :after + rotate для создания стрелок
• linear-gradient для background

#breadcrumb2 { 
        margin: 50px 0 0 0; padding: 0; 
      } 
#breadcrumb2 li { 
        display: inline-block; /* affichage horizontal */ 
        position: relative;
        background: #ccc;
        background-image: -webkit-linear-gradient(left, #bbb, #ccc 12px);
        background-image: -moz-linear-gradient(left, #bbb, #ccc 12px);
        background-image: -ms-linear-gradient(left, #bbb, #ccc 12px);
        background-image: -o-linear-gradient(left, #bbb, #ccc 12px);
        background-image: linear-gradient(left, #bbb, #ccc 12px);
        border: 1px solid #999;
        -webkit-transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        transition: opacity 1s;
      } 
#breadcrumb2 li + li {margin-left: -5px}
#breadcrumb2 li:nth-child(7) {z-index: 1}
#breadcrumb2 li:nth-child(6) {z-index: 2}
#breadcrumb2 li:nth-child(5) {z-index: 3}
#breadcrumb2 li:nth-child(4) {z-index: 4}
#breadcrumb2 li:nth-child(3) {z-index: 5}
#breadcrumb2 li:nth-child(2) {z-index: 6}
#breadcrumb2 li:first-child {z-index: 7}
#breadcrumb2 a {     
        display: inline-block;
        position: relative;
        padding: 8px 28px; 
        margin: 0;        
        color: #333; 
        text-decoration: none;  
        text-shadow: 1px 1px 1px rgba(255,255,255,0.5);      
      } 
#breadcrumb2 li:first-child {
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;    
}
#breadcrumb2 li:last-child {
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;    
}
#breadcrumb2 li:not(:last-child):before {
        content: "";
        position: absolute;
        right: 0px; top: 4px;
        width: 20px; height: 31px;
        background: #ccc;
        z-index: 10;
}      
#breadcrumb2 li:not(:last-child):after {
        content: "";
        position: absolute;
        right: -8px; top: 10px;
        width: 15px; height: 15px;
        background: #ccc;
        border: 1px solid #999;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
}
#breadcrumb2 li:hover {
        background-image: -webkit-linear-gradient(left, #bbb, #ccc 70%);
        background-image: -moz-linear-gradient(left, #bbb, #ccc 70%);
        background-image: -ms-linear-gradient(left, #bbb, #ccc 70%);
        background-image: -o-linear-gradient(left, #bbb, #ccc 70%);
        background-image: linear-gradient(left, #bbb, #ccc 70%);
}
#breadcrumb2 a:hover, #breadcrumb2 a:focus {
        color: #000; 
        text-decoration: underline;
}