Новые возможности CSS, такие как трансформации, переходы и градиенты, открывают возможности для реализации различных элементов дизайна с использованием только стилей. В данном уроке мы сделаем "хлебные крошки" со стрелками и градиентом цвета.
Шаг 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);
}