БлогСфера

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

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

Дело в том, что я желал применять все 5 из их, и я желал, чтоб они выбирались случайным образом. Я мог бы написать PHP, JS либо что-то схожее, чтоб ввести случайный выбор, но это чудилось очень сложным. К счастью, я отыскал метод применять старенькый хороший CSS, чтоб получить хотимый итог, даже если он не является вправду случайным. По сути, его предсказуемость стала преимуществом для меня как для дизайнера, но при всем этом отдала хотимый эффект для читателей.

(Направьте внимание, что в данной статье для ясности я упростил некие нюансы фактического CSS-кода: к примеру, удалил пути к каталогу из значений url() и просто показал названия файлов, либо удалил объявления, не имеющие конкретного дела к обсуждаемой теме. Я упоминаю о этом, чтоб вы были готовы к определенных различиям в CSS, описанном в этом сниппете, по сопоставлению с тем, что вы увидите в веб-инспекторе и / либо начальной таблице стилей.)

Вот с чего же мы начинаем:

CSS #thoughts .entry + .entry::before { content: «»; display: block; height: 10em; background: url(separator-big-05.png) 50% 100% / contain no-repeat;

}

Search Console повысила точность статистики по сканированию сайта

Это значит, что для каждой записи блога, не считая первой, в начало записи вставляется фрагмент сгенерированного контента на уровне блока с учетом высоты, и в сгенерированный блок помещается изображение separator-big-05.png с размерами, которые гарантируют, что оно на сто процентов вписывается в блок и никакая его часть не будет обрезана. (У файла есть номер 05, поэтому что он был пятым, из тех, что я сделал. Он стал моим возлюбленным, потому я сделал его изображением по дефлоту.)

Сейчас все, что мне остается, это переключить фоновое изображение, которое употребляется для разных записей. Я делаю это так:

CSS #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);

}

Таковым образом, любая 2-ая плюс один запись (3-я, 5-ая, седьмая и т. д.), которая не является первой, будет применять separator-big-02.png заместо -05.png. Если запись не является «каждой третьей плюс один» (четвертой, седьмой, десятой и т. д.), в этом случае заместо этого употребляется separator-big-03.png. И так дальше, через каждую пятую плюс один. И, как вы сможете созидать, 1-ое изображение, которое я сделал (separator-big-01.png), употребляется пореже всего, так что вы сможете додуматься о моем к нему отношении.

Этот способ генерирует прогнозируемый шаблон, но навряд ли он будет казаться очень циклическим, поэтому что он употребляется для прибавления иллюстраций, разбитых значимым количеством текстового содержимого, плюс есть довольно альтернатив, чтоб миксы выглядели свежо. Это также значит, беря во внимание, как работает техника, что 1-ое изображение разделителя на домашней страничке (и на страничках архива) постоянно мое любимое. Вот где предсказуемость подхода посодействовала мне как дизайнеру.

Angular: Как создать полноэкранный календарь, такой как в Outlook

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

CSS .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, но тут я изменяю изображение зависимо от количества частей в теле сообщения:

CSS .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);

}

Иными словами: если крайний дочерний элемент текста сообщения — это 2-ой плюс один, употребляется separator-big-02.png. Если в сообщении употребляется 3n + 1 (один, четыре, семь, 10, тринадцать…) HTML- частей — separator-big-03.png. И так дальше. Это практически случайный выбор из 5 изображений, потому что я не считаю количество частей в собственных постах по мере их написания. И это также значит, что если я отредактирую количество частей, иллюстрация поменяется! (Чтоб было ясно, я рассматриваю это как изюминка. Это дает маленькую патину непостоянства, которая отлично вписывается в общую тему.)

Я должен отметить, что в фактическом CSS два набора правил выше объединены в один, потому селекторы по сути таковы:

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, приведенный тут дословно и на сто процентов:

CSS @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

Редакция: Команда webformyself.

Источник