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

Новые возможности 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);
}


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Umx5eiVmQls/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Стильные хлебные крошки на CSS3 | | 2012-08-16 21:03:44 | | Статьи Web-мастеру | | Новые возможности CSS, такие как трансформации, переходы и градиенты, открывают возможности для реализации различных элементов дизайна с использованием только стилей. В данном уроке мы сделаем | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: