От автора: я был невероятно удовлетворен ответами на новый дизайн. Итак, прежде всего, спасибо всем, кто поделился своими отзывами! Я действительно ценю вашу доброту, и я хотел бы немного отплатить за нее, рассказав о некоторых методах, которые я использовал для создания этого дизайна. Сегодня давайте поговорим о иллюстрациях в стиле старинных гравюр, размещенных между записями на сайте, и еще в одном месте, к чему я вернусь позже.
В самом начале процесса я знал, что хочу разделить записи декоративными элементами, чтобы разбить поток текста. Немного работы в Acorn, и я получил пять готовых иллюстраций.
Дело в том, что я хотел использовать все пять из них, и я хотел, чтобы они выбирались случайным образом. Я мог бы написать PHP, JS или что-то подобное, чтобы внедрить случайный выбор, но это казалось слишком сложным. К счастью, я нашел способ использовать старый добрый CSS, чтобы получить желаемый результат, даже если он не является действительно случайным. На самом деле, его предсказуемость стала преимуществом для меня как для дизайнера, но при этом дала желаемый эффект для читателей.
(Обратите внимание, что в этой статье для ясности я упростил некоторые аспекты фактического CSS-кода: например, удалил пути к каталогу из значений url() и просто отобразил имена файлов, или удалил объявления, не имеющие непосредственного отношения к обсуждаемой теме. Я упоминаю об этом, чтобы вы были готовы к определенных различиям в CSS, описанном в этом сниппете, по сравнению с тем, что вы увидите в веб-инспекторе и / или исходной таблице стилей.)
Вот с чего мы начинаем:
#thoughts .entry + .entry::before { content: ""; display: block; height: 10em; background: url(separator-big-05.png) 50% 100% / contain no-repeat;
}Это означает, что для каждой записи блога, кроме первой, в начало записи вставляется фрагмент сгенерированного контента на уровне блока с учетом высоты, и в сгенерированный блок помещается изображение separator-big-05.png с размерами, которые гарантируют, что оно полностью вписывается в блок и никакая его часть не будет обрезана. (У файла есть номер 05, потому что он был пятым, из тех, что я создал. Он стал моим любимым, поэтому я сделал его изображением по умолчанию.)
Теперь все, что мне остается, это переключить фоновое изображение, которое используется для различных записей. Я делаю это так:
#thoughts .entry:nth-of-type(2n+1)::before { background-image: url(separator-big-02.png);
}
#thoughts .entry:nth-of-type(3n+1)::before { background-image: url(separator-big-03.png);
}
#thoughts .entry:nth-of-type(4n+1)::before { background-image: url(separator-big-04.png);
}
#thoughts .entry:nth-of-type(5n+1)::before { background-image: url(separator-big-01.png);
}Таким образом, каждая вторая плюс один запись (третья, пятая, седьмая и т. д.), которая не является первой, будет использовать separator-big-02.png вместо -05.png. Если запись не является «каждой третьей плюс один» (четвертой, седьмой, десятой и т. д.), в этом случае вместо этого используется separator-big-03.png. И так далее, через каждую пятую плюс один. И, как вы можете видеть, первое изображение, которое я создал (separator-big-01.png), используется реже всего, так что вы можете догадаться о моем к нему отношении.
Этот метод генерирует предсказуемый шаблон, но вряд ли он будет казаться слишком повторяющимся, потому что он используется для добавления иллюстраций, разделенных значительным количеством текстового содержимого, плюс есть достаточно альтернатив, чтобы миксы выглядели свежо. Это также означает, учитывая, как работает техника, что первое изображение разделителя на домашней странице (и на страницах архива) всегда мое любимое. Вот где предсказуемость подхода помогла мне как дизайнеру.
Я использую аналогичный подход для разделителя между текстом постов и комментариями, за исключением того, что я добавляю сгенерированное поле в конец последнего дочернего элемента в данной записи:
.single #thoughts article .text > *:last-child:after { content: ""; display: block; height: 10em; background: url(separator-big-05.png) 50% 100% / contain no-repeat;
}Таким образом, на любой странице, классифицированной как single (это все отдельные страницы публикации) после последнего дочернего элемента элемента .text (который содержит текст записи) создается блок оформления. По умолчанию, опять же — separator-big-05.png, но здесь я изменяю изображение в зависимости от количества элементов в теле сообщения:
.single #thoughts article .text > *:nth-child(2n+1)::after { background-image: url(separator-big-02.png);
}
.single #thoughts article .text > *:nth-child(3n+1)::after { background-image: url(separator-big-03.png);
}
.single #thoughts article .text > *:nth-child(4n+1)::after { background-image: url(separator-big-04.png);
}
.single #thoughts article .text > *:nth-child(5n+1)::after { background-image: url(separator-big-01.png);
}Другими словами: если последний дочерний элемент текста сообщения — это второй плюс один, используется separator-big-02.png. Если в сообщении используется 3n + 1 (один, четыре, семь, десять, тринадцать…) HTML- элементов — separator-big-03.png. И так далее. Это фактически случайный выбор из пяти изображений, так как я не считаю количество элементов в своих постах по мере их написания. И это также означает, что если я отредактирую количество элементов, иллюстрация изменится! (Чтобы было ясно, я рассматриваю это как особенность. Это дает небольшую патину непостоянства, которая хорошо вписывается в общую тему.)
Я должен отметить, что в фактическом CSS два набора правил выше объединены в один, поэтому селекторы на самом деле таковы:
#thoughts .entry + .entry::before, .single #thoughts article .text > *:last-child:after {…} #thoughts .entry:nth-of-type(2n+1)::before, .single #thoughts article .text > *:nth-child(2n+1)::after {…} #thoughts .entry:nth-of-type(3n+1)::before, .single #thoughts article .text > *:nth-child(3n+1)::after {…}Честно говоря, эта техника действительно удовлетворяет меня. Она использует структуру документа, имеющего случайный вид, и его легко обновлять, просто заменяя файлы или изменяя URL-адреса. Также легко добавить другие правила, чтобы добавить еще больше изображений, если я захочу.
И так как мы говорим об использовании структуры для изменения макета, у меня также есть блок @media, приведенный здесь дословно и полностью:
@media (min-width: 50em) { #thoughts .entry:nth-of-type(2n) { transform: translate(-1vw,0); } #thoughts .entry:nth-of-type(3n) { transform: translate(3vw,0); }
}Это означает, что на главной странице и страницах архивов блога, но только при ширине окна для настольного браузера, некоторые записи смещаются немного влево или вправо на доли ширины области просмотра, что тонко нарушает строгую линейность столбца контента, не позволяя ему выглядеть слишком похожим на сетку.
Честно говоря, я понятия не имею, действительно ли этот сдвиг в сторону влияет на опыт взаимодействия посетителей, но мне он нравится. Иногда декоративные волны совпадает с боковым сдвигом, так что это выглядит так, как будто иллюстрация перетекает в контент. Такой случайный шаблон всегда радует меня, будь то моя работа или чья-то еще.
Автор: Eric A. Meyer
Источник: https://meyerweb.com
Редакция: Команда webformyself.