Стильные "хлебные крошки" на CSS3

dredd

Пользователь
#1


В main.css добавляем:
Код:
#breadcrumbs {
display: inline-block;
margin: 10px;
padding-right: 18px;
border-radius: 10px;
box-shadow:0 0 1px rgba(0,0,0,0.5);
 
}
.button {
display: inline-block;
cursor: pointer;
margin-right: -20px;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(top, #729fcf, #3465a4);
background: -o-linear-gradient(top, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
}
.button:hover {
background-color: #3465a4;
background: -moz-linear-gradient(bottom, #729fcf, #3465a4);
background: -o-linear-gradient(bottom, #729fcf, #3465a4);
background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4));
box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);}
.button:first-child {border-radius: 10px 0 0 10px;}
.button:last-child {border-radius: 0 10px 10px 0;}
.label {
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
color: white;
height: 30px;
padding: 8px;
-moz-user-select: none;
-webkit-user-select: none;
display: inline-block;
padding-left: 25px;
}
.button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;}
.button:first-child .label {padding-left: 15px;}
.button:last-child .label {padding-right: 15px;}
.button:last-child .arrow {display: none;}
.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;margin-left: -5px;}
.arrow span {
border-radius: 5px;
width: 24px;height: 24px;
display: inline-block;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
margin-left: -13px;
margin-top: 3px;
box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25);
background-color: #729fcf;
background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
background: -o-linear-gradient(135deg, #3465a4, #729fcf);
background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf));
}
.button:hover .arrow span {
background-color: #3465a4;
background: -moz-linear-gradient(135deg, #729fcf, #3465a4);
background: -o-linear-gradient(135deg, #729fcf, #3465a4);
background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf));
box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25);
}
Код вывода:

HTML:
<div id="breadcrumbs">
    <div class="button">
        <span class="label">Главная</span>
        <span class="arrow"><span></span></span>
    </div>
    <div class="button">
        <span class="label">Продукты</span>
        <span class="arrow"><span></span></span>
    </div>
    <div class="button">
        <span class="label">Цвета</span>
        <span class="arrow"><span></span></span>       
    </div>
    <div class="button">
        <span class="label">Белый</span>
        <span class="arrow"><span></span></span>
    </div>           
</div>
 

Nightmare

Разработчик
#9
Dr_Brown, действительно непосильная задача
Код:
<div id="breadcrumbs">
    <div class="button">
        <a href="{U_INDEX}" class="label">{U_INDEX}</a>
    <span class="arrow"><span></span></span>
    </div>
    <!-- IF HAS_PARENT_FORUM -->
    <div class="button">
        <a href="{PARENT_FORUM_HREF}" class="label">{PARENT_FORUM_NAME}</a>
        <span class="arrow"><span></span></span>
    </div>
    <!-- ENDIF -->
    <div class="button">
        <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
        <span class="arrow"><span></span></span>
    </div>
</div>
 
Сверху