Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Меню для сайта рок-группы: хаотичное расположение с использованием трансформаций CSS

26 августа 2016 | Опубликовано в css | 2 Комментариев »

У большинства веб-сайтов строгая прямоугольная структура. А отличающиеся сайты обычно перегружены изображениями, что требует много работы в программе 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

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

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




Комментарии

  1. absavto-56draic
    Thumb up Thumb down 0

    Автомобильные грузоперевозки в Оренбурге. Адреса и телефоны транспортных компаний Оренбурга и Оренбургской области.

    крупнотоннажных грузо

    Оренбург — Городские автогрузоперевозки оренбург. Грузовое оренбург грузовое такси — Оренбург. Скидки постоянным клиентам! Грузилкин, многопрофильная компания — Оренбург. Заказ Газели-400 р./ч. грузчики оренбург 250-р/ч. Переезды, такелаж, межгород! Адрес: Братьев Коростелёвых проспект, 179/4. Грузим Возим Разгружаем, грузовое оренбург грузовое такси — Оренбург. Заказ газели и грузчиков. Приедем быстро, возьмем не дорого! Звони нам. Белое, служба перевозок — Оренбург. По городу от 400 рублей. грузчики оренбург опытные и аккуратные *1.12.16–31.12.17. Подробности на www.taxibeloe.ru. Служба по заказу газелей и грузчиков — Оренбург. Заказ Газели и грузчиков. Низкие цены. Быстро и качественно. Звони! Деловые Линии, ООО, транспортная компания — Оренбург. Адрес: Загородное шоссе, 3г. ПЭК, транспортная компания — Оренбург. ДПД, служба экспресс-доставки — Оренбург. Возим Грузим Оренбург, служба перевозок — Оренбург. Адрес: Шарлыкское шоссе, 1 к2. ААА-автоагент, транспортная компания — Оренбург. Максим, сервис заказа легкового и грузового транспорта — Оренбург. Оренбурггазтранс, ООО, транспортная компания — Оренбург. ГОСТ, служба заказа пассажирского легкового транспорта — Оренбург. Адрес: Победы проспект, 114. Оренбург-РеалСтрой, ООО, транспортная компания — Оренбург. Газпром добыча Оренбург, ООО, управление технологического транспорта и специальной техники — Оренбург. ТТ, диспетчерская служба — Оренбург. Адрес: Победы проспект, 114. Караван, ООО, транспортная компания — Оренбург. Global express, транспортно-экспедиционная компания — Оренбург. Адрес: Шарлыкское шоссе, 1 к2. СтройГазСервис, ООО, торгово-транспортная компания — Оренбург. ТРАНССЕРВИС, ООО, единый сервис грузоперевозок — Оренбург. Рассвет, ООО — Оренбург. Адрес: Автоматики проезд, 14. Диантус, транспортно-логистическая компания — Оренбург. Адрес: Братьев Коростелёвых проспект, 52Б. Грузилкин, многопрофильная компания — Оренбург. Заказ Газели-400 р./ч. грузчики оренбург 250-р/ч. Переезды, такелаж, межгород!

    крупнотоннажных грузо

    кашалот транспортная компания оренбург

    Ответить

Оставить ответ


пять − 1 =

Вставить изображение