Рисование CSS шаблоны

Настраиваемые CSS-шаблоны для рисования, обеспечивающие единообразный стиль

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

Ширина столбцов, зазоры, соотношение сторон изображений

Большая часть внешнего вида галереи определяется несколькими свойствами, и стоит посмотреть, как они задаются:

1. Сетка или Flexbox для галереи, при этом зазоры используются для установки интервалов вместо полей на каждой карточке;

2. Фиксированное соотношение сторон для медиа-блока, чтобы ряды оставались ровными независимо от размеров отсканированного файла;

3. object-fit: cover для единообразных миниатюр, object-fit: contain там, где должен располагаться весь рисунок;

4. Постоянное расстояние под изображением для меток «средний размер» и «год», предотвращающее изменение высоты карточек в подписях.

Неудобный случай — длинный вертикальный этюд фигуры, расположенный рядом с квадратным крупным планом того же объекта. При использовании режима «обложка» ноги обрезаются; при использовании режима «контейнер» рисунок сохраняется, но остаются пустые полосы по бокам. Стиль, ограничивающий высоту медиа-блока и центрирующий изображение в пределах фиксированного соотношения сторон, решает обе задачи без отдельного правила для каждого произведения.

Узкие экраны без искаженных миниатюр

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

1. Остаются ли предварительные просмотры достаточно широкими для чтения при самой маленькой ширине, вместо того чтобы сохранять дополнительные колонки;

2. Переносятся ли подписи под изображение и сохраняют ли они свое расстояние, когда заголовок слишком длинный;

3. Что заменяет эффект наведения курсора при касании, поскольку состояния предварительного просмотра и ссылки на подробные представления требуют эквивалента фокусировки.

Локальные переопределения, когда предустановленные стили не справляются

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

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