2 161 Скрипты / Other

Breadcrumb на CSS3 без изображений


Два варианта создания хлебных крошек с использованием CSS3.
Работает в Firefox 3.0+, Chrome 5+, IE9, Safari 4+, Opera 11.

HTML

Разметка общая для двух вариантов, если не считать название идентификатора у списка:

    <ul id="breadcrumb"> 
        <li><a href="#">Новости</a></li>
        <li><a href="#">Software</a></li>
        <li><a href="#">Операционки</a></li>
        <li><a href="#">Linux</a></li>
        <li><a href="#">Ubuntu</a></li>
        <li><a href="#">Вышла новая версия ubuntu!</a></li> 
    </ul> 

CSS

Для первого варианта хлебных крошек.
Где используется:

  • border-radius на правом краю
  • transparent radial-gradient на левом краю
  • одноуровневый селектор (~) при hover
Для второго варианта.
Где используется:
  • :before и :after + rotate для создания стрелок
  • linear-gradient для background
Скачать 450Загрузок 1,73 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи