Этот урок опубликовал вчера Chris Coyier, и мы не могли оставить его незамеченным. Способ, описанный в нем, можно здорово применить не только в качестве заголовка раздела или статьи, но и в полосе «хлебных крошек». Мы перевели его статью, добавив некоторые замечания, высказанные читателями CSS-Tricks. Крису приглянулись вот эти стрелочки на панельках заголовков сайта Adobe: 

Панели заголовков состоят из двух частей. В левой содержится поясняющая надпись, а в правой — ссылка на соответствующий раздел или ресурс. Теперь давайте разберемся, как это было сделано. Во-первых, тут используется неспрайтовое изображение:

Это означает дополнительный HTTP-запрос на одни только заголовки. И, что еще хуже, для :hover-эффекта используется отдельное изображение. Следовательно, требуется еще один HTTP-запрос для загрузки второго изображения в момент, когда вы впервые подводите мышку к заголовку.

Мы все это можем сделать без всяких изображений. Вот таким образом это будет выглядеть:

Демо и исходные файлы от Криса.

Разметка заголовка представляет собой лишь название со ссылкой:

HTML

<div class="module">
  <h2>Community <a href="#">Blue</a></h2>
  <!-- stuff in module -->
</div>

А вот базовый стиль для заголовка, со ссылкой справа, изначальным цветом и прямой белой линией, заданной через border:

CSS

.module h2 {
        background: #ccc;
        padding: 0 0 0 10px;
        font-size: 16px;

        /* Thickness of the bar more easily achieved with line-height
        since padding would push link inward. */
        line-height: 2;
}
.module h2 a {
        float: right;
        position: relative;
        text-decoration: none;
        color: #333;
        padding: 0 10px;
        border-left: 5px solid white;
}

Теперь осталось лишь сделать на линии уголок-стрелочку, воспользовавшись методом, описанным в статье CSS triangles, суть которого в том, что мы создаем область с нулевыми высотой и шириной, а реальные размеры задаем толщиной border. Так, в нашем случае, правая граница окрашена, а верхняя и нижняя — прозрачные, получается треугольник. Единственная поправка к той статье в том, что вместо значения transparent следует применять значение rgba(0,0,0,0), иначе мы будем иметь проблемы со сглаживанием в Firefox. Дело в том, что transparent — это все равно, что rgba(0,0,0,0), то есть прозрачный черный, мы в итоге получим некрасивые серые полосы, заметные в Firefox. Нам же надо указать значение rgba(255,255,255,0), то есть прозрачный белый, и все пройдет. Применяем при помощи вездесущих псевдо-элементов

CSS

.module h2 a:before,
.module h2 a:after {
        content: "";
        position: absolute;
        /* Pushed down half way, will get pulled back up half height of triangle
ensures centering if font-size or line-height changes */
        top: 50%;
        width: 0;
        height: 0;
}
.module h2 a:before {
        left: -12px;
        /* Triangle */
        border-top: 8px solid rgba(0,0,0,0);
        border-bottom: 8px solid rgba(0,0,0,0);
        border-right: 8px solid white;
        /* Pull-up */
        margin-top: -8px;
}
.module h2 a:after {
        /* Smaller and different position triangle */
        left: -5px;
        border-top: 6px solid rgba(0,0,0,0);
        border-bottom: 6px solid rgba(0,0,0,0);
        border-right: 6px solid #a2d6eb;
        margin-top: -6px;
}

Главным отличием наших заголовков от исходных с Adobe в том, что на те наискосок наложен градиент. В нашем случае это невозможно, потому как нельзя создать градиент с помощью нашего CSS-метода. Но еще это не значит, что нельзя применить градиент выше и ниже треугольника, просто проследите, чтобы в местах прикосновения к треугольнику цвет заливки уже был однородным.

Другой вариант отображения градиента на такой ссылке-стрелочке предлагает нам Enrique Moreno. По его методу можно довести градиент и до треугольника:

На демо-странице Крис добавил варианты с несколькими цветами и разными transition, которые, кстати сказать, в Опере работают некорректно А также примеры стильных двуслойных треугольников-маркеров слева от заголовка — опять же, выглядящие в Firefox куда симпатичнее Оперы из-за более мягкого сглаживания ею границ, о чем мы писали в статье Как браузеры отображают различные значения CSS border-style 

Многое тут надо дорабатывать «напильником» под конкретные цели. И все равно, надеемся, эта статья пригодится вам в работе, либо натолкнет на новые дизайн-идеи. Оригинал ее можно найти на CSS tricks

Успешного творчества ;)
Ваша Дежурка.



Комментарии