Китегории

Как сделать ленты на CSS3 без картинок

6 мая 2022

В моей прошлой статье Как сделать словесный пузырь на 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.


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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Статьи