На некоторых сайтах вы, наверное, не разе замечали так называемые «хлебные крошки», которые сохраняют путь пройденного вами пути на сайте. Это достаточно удобно, ведь позволяет быстро вернуться в необходимый раздел сайта. Но зачастую такие крошки достаточно не приметные, и пользователь не обращает на них внимание, при этот данный элемент на сайте теряет свою значимость. В данном уроке мы рассмотрим как стилизовать данные следы на сайте, чтобы они отлично привлекали взор посетителя и при этом выполняли свое задание.

Напомним, что мы рассмотрим как создать стили самых следов при помощи исключительно CSS3. И так приступим.

Шаг 1. HTML

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

Как вы заметили ничего сложного в этом нет, теперь перейдем к следующему шагу урока.

Шаг 2. CSS

Теперь нам надо рассмотреть градиентную заливу, и общие правила для активного и пассивного режима данных «хлебных крошек»

Шаг 3. Стрелки

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

Так создается иллюзия треугольника с градиентами или тенями.

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

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.