Создаем хлебные крошки, Breadcrumb, в плоском стиле flat.

6
23092

Благодаря быстрому развитию CSS и CSS3 мы получили огромные возможности для манипуляций с html объектами. Постепенно старые техники создания сложных элементов web страницы уходят и их заменяют новые, быстрые способы. Сегодня мы создадим с помощью CSS красивые хлебные крошки, или их еще называют Breadcrumb. Хлебные крошки используются на страницах сайта для уведомления пользователей об их местонахождении на сайте, таким образом мы не только помогаем пользователям понять где они находятся, но и создаем удобную навигацию по страницам сайта.

Мы создадим эти хлебные крошки в стиле направляющих стрелок. Еще совсем недавно, для создания таких элементов потребовалось бы работать с изображениями и баловаться с background’ом, но сейчас этот эффект можно достичь используя лишь border и несколько псевдо-селекторов в CSS. Создайте документ где вы собираетесь реализовать данный урок и давайте приступим.

Базовая разметка

Базовая разметка будет состоять из обыкновенного списка ul>li>a> обернутого в контейнер с id #breadcrumbs

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

Использованные стили создадут обыкновенный прямоугольник синего цвета с заданной шириной и внутренним отступом, ничего особенного. Теперь давайте создадим эффект стрелки, в этом нам поможет псевдо-селектор :after

Для наглядности, мы выбрали красный и синий цвет, чтобы вы могли видеть, как реализуется данный эффект.

Ранее такой эффект можно было достичь лишь с использование фонового изображения, здесь же мы использовали псевдо-селектор :after для создания дополнительного элемента после самого прямоугольника и работаем с ним индивидуально, словно это отдельный элемент. Данный эффект мы создали с помощью CSS свойства border, красный border перекрывает то место, которое мы сделаем под цвет фона или вовсе, прозрачным, напомню, красный был выбран для демонстрации.  Замените наши правило следующим образом:

Одно из главных правил здесь — это z-index, не забываем, что т.к. наши стрелочки будут стоять рядом друг с другом и чтобы одна не перекрывала другую мы должны расположить их c помощью z-index.

Мы получили ровную и красивую стрелку. Популярный вариант стрелки выглядит немного по другому, и сейчас мы это сделаем, до этого мы работали с псевдо-селектором :after, давайте поработаем с :before и сделаем что-то вроде этого:

Чтобы добиться такого эффекта достаточно применить правила:

Чтобы всё выглядело более привлекательно, выравниваем элемент по центру и меняем отступ padding, для этого добавьте правила для #breadcrumbs ul li a

В результате получилось:

Теперь давайте изменим нашу базовую разметку и добавим еще несколько элементов списка

Результат:

Помните я писал про z-index? Если бы мы не использовали его, то результат был бы очень не красивым.

Последние штрихи для создания наших хлебных крошек простые, чтобы сделать их красивее можно первый и последний элемент списка закруглить и не делать острым. Добавьте несколько правил в файл стилей:

Добавим больше элементов в список:

Результат:

И немного :hover эффекта на ссылки, чтобы при наведение они меняли цвет:

Вот и всё! Получилось очень красиво. Всем спасибо! До скорых встреч!

 

6 КОММЕНТАРИИ

  1. Здравствуйте. Скажите смогу ли я задать такой стиль хлебным крошкам выведенным с помощью плагина?

    • Привет! Да, но только в случае, если структура (html) крошек в плагине, соответствует структуре, которая описана в статье. В крайнем случае, можно изменить вывод в самом плагине и подстроить под Ваш случай.

    • Ок. спс. за ответ… видимо только в плагине надо редактировать стиль вывода…. Пока нет много времени… позже займусь обязательно,.. уж больно очень понравился стиль вывода описанный в вашей статье…

    • Не было необходимости в хлебных крошках :)

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя