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

Новые возможности CSS, такие как трансформации, переходы и градиенты, открывают возможности для реализации различных элементов дизайна с использованием только стилей. В данном уроке мы сделаем "хлебные крошки" со стрелками и градиентом цвета. 

Хлебные крошки

demosourse

 

Шаг 1. Основа кнопок

Создание кнопок с градиентами и тенями является достаточно простой задачей. Мы используем комбинацию элементов div и span, но можно построить все на основе списка.

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

 

* {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: sans-serif;
     font-size: 12px;
}
 
body {background-color: #d3d7cf;}
 
#breadcrumbs {
    display: inline-block;
    margin: 10px;
    border-radius: 10px;
    box-shadow:0 0 1px rgba(0,0,0,0.5);
}
.button {
    display: inline-block;
    cursor: pointer;
    margin-right: -3px;
    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;
}
 
.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;}

 

Шаг 2. Создаем стрелки

Для того чтобы создать треугольные стрелки с градиентами будем использовать CSS трансформации и простую обрезку. Сначала мы создаем элемент span и вращаем его на 45 градусов. Будем использовать несколько градиентов из шага 1, но с углом в 135 градусов. Мы вставлем повернутый элемент span  в другой и выравниваем размеры, поля и свойство перекрытия так, чтобы было видно только половину внутреннего элемента. Так создается иллюзия треугольника с градиентами или тенями.

<span class="arrow"><span></span></span>

 

.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;}
 
.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));
}
 
.arrow:hover 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);
}

 

Шаг 3. Собираем все вместе

Помещаем стрелку после метки и устанавливаем поля и отступы.

  • Устанавливаем для класса .arrow для свойства margin-left значение -5px.
  • Изменяем .arrow:hover на .button:hover .arrow.
  • Устнавливаем для класса .label для свойства padding-left значение 25px, а для класса .button для свойства margin-right значение -20px.
  • Устанавливаем для идентификатора #breadcrumbs для свойства padding-right значение 18px.
<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>

 

* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 font-size: 12px;
}
body {background-color: #d3d7cf;}
 
#container
{
 width: 285px;
 margin: 0 auto;
 margin-top: 23%;
}
 
#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);
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignshock.com/css-breadcrumb/
Перевел: Сергей Фастунов
Урок создан: 5 Августа 2012
Просмотров: 36139
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Августа 2012 14:54
    atorian
    поправьте баг: когда наводишь на уголочек и ведешь к тексту есть зона где hover не срабатывает. стрелка прыгает. А так задумка интересная.
    • 6 Августа 2012 14:33
      viktor.lavrenko
      Здесь не исправят. тут только переводят)) Сначала пишите на сайт где выложили оригинал этого урока, чтобы исправили. Потом может быть и тут исправят))
  • 5 Августа 2012 15:59
    ileonidze
    да, подглючивает
  • 5 Августа 2012 19:00
    alexsave
    У меня уже 2 года на сайте стоит, использую для перелинковки
  • 6 Августа 2012 10:17
    rymaruk
    Та ну, ви что... Такое на сайт, это же грубо. Метод крошки это силки которие должни быть только тогда когда это нужно пользователю! А так, еще разок повторил технику градиента))Спасибо))
  • 6 Августа 2012 10:36
    msdteam
    Жесть. Свалка кода. Такое нужно делать списками.
    • 6 Августа 2012 14:31
      viktor.lavrenko
      Согласен. Столько кода, можно сайт сверстать. Уж лучше в CSS2 с картинками сделать.
  • 6 Августа 2012 13:46
    masyan
    Подскажите пожалуйста, как изменить в нем ширину всего меню, а также шрифт текста?
  • 11 Августа 2012 11:33
    Valbars
    А будут какие-нибудь новые видео-курсы по CSS3 и HTML5 ?
^ Наверх ^