Во славу теней

Переиздано Платоном

Читают: 0

У нашего дорогого друга Робина есть новое эссе под названием Во славу теней. Теперь, прежде чем вы начнете искать самородки по теням блоков CSS, теням текста и теневым фильтрам… не то. Это эссе о фотографии и о том, что Робин узнала о передаче теней с помощью камеры.

Итак, зачем делиться этим? Потому что это чертовски круто, что он сделал страницу, посвященную одной статье, посвященную одному эссе. И вы многое узнаете о CSS, если взломаете на нем DevTools:

Техники центрирования. Обратите внимание, как CSS Grid используется на <body> просто чтобы центрировать брошюру. Затем Робин снова тянется к нему на каждом .frame эссе, чтобы сделать то же самое с содержанием.
«Искусственные» фоновые изображения. Робин мог бы сделать много работы для себя, создав класс CSS для каждого .frame чтобы получить фоновые изображения. Вместо этого он использует object-fit: cover на встроенном HTML <img>s для сохранения соотношения сторон при заполнении .frame контейнер. (Он на самом деле написано об этом раньше.) Это, конечно, экономит много CSS-кода, но также позволяет ему использовать замещающий текст, если это необходимо. мне интересно, если <figure>/<figcaption> структура могла бы работать здесь вместо этого, но я сомневаюсь, что это принесет много дополнительной пользы для того, что происходит.
Наложение контекстов. Еще одно преимущество этих искусственных фоновых изображений? Они используют абсолютное позиционирование, которое создает контекст стека, позволяя Робину устанавливать z-index: 0 на изображениях. Таким образом, текст размещается прямо сверху с z-index: 1. Опять же, CSS Grid обрабатывает все центрирование, чтобы все было хорошо выровнено.
Привязка прокрутки. я всегда любят это когда я вижу привязку прокрутки CSS в дикой природе. Робин сделал хороший выбор, чтобы использовать его здесь, так как он действительно дает весь опыт перелистывания страниц при прокрутке кадров. Горизонтальная прокрутка может сводить с ума, но в то же время чрезвычайно элегантна, если ее правильно выполнить, как здесь, поскольку она улучшает дизайн с узкими колонками. Если вам нужно хорошее объяснение того, как все это работает, Робин также написано о привязке горизонтальной прокрутки.