В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.
Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h2>.
<h2>My Heading</h2>
Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.
/* элемент с контентом */ #page { width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; border: 1px solid #333; } h2 { position: relative; width: 50%; font-size: 1.5em; font-weight: bold; padding: 6px 20px 6px 70px; margin: 30px 10px 10px -71px; color: #555; background-color: #999; text-shadow: 0px 1px 2px #bbb; -webkit-box-shadow: 0px 2px 4px #888; -moz-box-shadow: 0px 2px 4px #888; box-shadow: 0px 2px 4px #888; }
В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используем position: relative чтобы при необходимости можно было позиционировать другие элементы ленты.
Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.
h2:after { content: ' '; position: absolute; width: 0; height: 0; left: 0px; top: 100%; border-width: 5px 10px; border-style: solid; border-color: #666 #666 transparent transparent; }
Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before.
Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.
h2:before { content: ' '; position: absolute; width: 30px; height: 0; left: -30px; top: 12px; border-width: 20px 10px; border-style: solid; border-color: #999 #999 #999 transparent; }
Цвет границы у псевдоэлемента должен совпадать с цветом фона h2, поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.
Пожалуйста, ознакомьтесь с демонстрационной страницей где показаны все три стиля ленты. Как и ожидалось, это работает в IE8, IE9, Firefox, Chrome, Safari и Opera. IE6 и IE7 показывают изящную деградацию и отображают основной заголовок. Весь код CSS содержится внутри HTML.
Сайт