На честь тіней

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

читають: 0

Наш дорогий друг Робін має новий твір під назвою У похвалі тіней. А тепер, перш ніж ви заскочите туди, шукаючи самородки в тінях вікон CSS, тінях тексту та фільтрах тіней… це не те щоб. Це есе про фотографію та те, що Робін дізнався про передачу тіней за допомогою камери.

Отже, навіщо ділитися цим? Бо це круто, що він створив сторінку, присвячену статті, присвяченій одному есею. І ви дізнаєтеся багато нового про CSS, якщо зламаєте на ньому DevTools:

Прийоми центрування. Зверніть увагу, як CSS Grid використовується на <body> просто до по центру брошури. Тоді Робін знову тягнеться до нього на кожному .frame есе, щоб зробити те саме зі змістом.
«Фальшиві» фонові зображення. Робін міг би зробити собі багато роботи, створивши клас CSS для кожного .frame щоб отримати фонові зображення. Натомість він використовує object-fit: cover на вбудованому HTML <img>s для збереження співвідношення сторін під час заповнення .frame контейнер. (Насправді він написано про це раніше.) Це, звичайно, заощаджує багато CSS, але це також дозволяє йому використовувати альтернативний текст, якщо потрібно. Мені цікаво, чи а <figure>/<figcaption> Структура могла б спрацювати тут замість цього, але я сумніваюся, що це забезпечить додаткову користь для того, що відбувається.
Контексти стекування. Ще одна перевага цих штучних фонових зображень? Вони використовують абсолютне позиціонування, яке створює контекст стекування, що дозволяє Робіну встановити a z-index: 0 на зображеннях. Таким чином текст укладається безпосередньо поверх z-index: 1. Знову ж таки, CSS Grid обробляє все центрування, щоб речі були добре вирівняні.
Прокручування. я завжди любов це, коли я бачу, як прокручування CSS замикається в дикій природі. Робін зробив гарний вибір, щоб використати його тут, оскільки він справді надає повний досвід перегортання сторінок під час прокручування кадрів. Горизонтальне прокручування може бути божевільним, але також надзвичайно елегантним, якщо його виконати добре, оскільки воно покращує дизайн вузьких стовпчиків. Якщо ви хочете гарне пояснення того, як це все працює, Робін також має написано про горизонтальну прокрутку.