У большинства веб-сайтов строгая прямоугольная структура. А отличающиеся сайты обычно перегружены изображениями, что требует много работы в программе Photoshop. Но с помощью CSS можно создать непрямоугольный дизайн веб-сайта вообще без использования изображений.

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

Мы нашли бесплатный шрифт Impact Label от автора Tension Type на сайте dafont.

После этого занялись кодом HTML. Структура меню для сайта самая обычная:

<nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Tours</a>
        <a href="#">Contact</a>
</nav>

Все волшебство находится в коде CSS.

Для начала сделаем следующее:

• Встроим нестандартный шрифт в веб-страницу

• Используем вращение и смещение элементов списка, чтобы придать псевдослучайный вид

@font-face {
        font-family: Impact Label;
        src: url('Impact_Label.woff');
        font-weight: normal;
        font-style: normal;
}
body { background: #777; }
nav a {
        font-family: Impact Label, sans-serif;
        font-size: 200%;
        color: #323;
        background: white;
        display: inline-block;
        margin: 1.1em;
        border: .5em solid #323;
        position: relative;
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
nav a:nth-child(odd) {
        margin-top: 1em;
        transform: rotate(-4deg);
}
nav a:nth-child(even) {
        margin-top: .8em;
        transform: rotate(4deg);
}
nav a:nth-child(4n) {
        margin-top: -.8em;
        transform: rotate(2deg);
}

Краткое объяснение: в коде используются четные и нечетные селекторы псевдоклассов для задания разных трансформаций и положений элементам списка. Вместе эти свойства создают впечатление случайного расположения элементов меню.

Зачем использовать такой подход в веб-дизайне? Основное преимущество в том, что не требуется редактирование в программе PhotoShop: все изменения в меню, такие как шрифты, межбуквенные интервалы, расположение и угол поворота, можно внести быстро, прямо в коде CSS.

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

И, наконец, добавим эффект загибающегося уголка половине ссылок:

nav a:nth-child(even):before {
        content: "";
        position: absolute;
        top: -.5em;
        right: -.5em;
        border-width: 0 16px 16px 0;
        border-style: solid;
        border-color: #bbb #222;
}

Обратите внимание, что второй цвет у свойства границы задается для правого верхнего угла, внешнего угла загибающегося уголка, и закрывает цвет, заданный свойством границы.

Примечание от Дежурки (или от переводчика Maya_Specctra, как тебе больше понравится): рекомендуем в этом примере добавить свойство высоты шрифта line-height: 1; , чтобы во всех браузерах такое меню выглядело одинаково, так как по умолчанию это свойство может иметь разное значение в разных браузерах, и тогда с таким шрифтом может появиться полоса над шрифтом, или даже и над, и под шрифтом.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Двухмерные трансформации CSS: наклон, масштабирование и сдвиг
• Использование двухмерных трансформаций CSS: трансформация поворота
• Простое анимированное горизонтальное меню с использованием HTML5 и CSS