В общем, вот в чём была проблема. Я потратил столько времени, чтобы сделать сайту живой фон, гору, птиц, звёзды, а потом пошёл читать пост, и текст просто лежал поверх всего этого. Никакого разделения. Текст выглядел приклеенным к сцене, совершенно плоским, как будто кто-то напечатал абзац поверх фотографии и на этом успокоился. Честно говоря, выглядело хуже, чем до того, как я вообще добавил фон.
Первым делом попробовал самый дешёвый вариант. Просто обвёл колонку с текстом рамкой.
.reading-panel {
border: 1px solid var(--color-border);
}Не сработало. Тонкая линия вокруг текста ничего не даёт, когда настоящая проблема в том, что текст и фон лежат в одной визуальной плоскости. Всё так же выглядело приклеенным, просто теперь ещё и в рамке.
Тогда я пошёл в другую сторону и сделал сплошную плашку. Нормальный фоновый цвет, вся колонка залита целиком. И это сработало, текст сразу же оторвался от фона. Вот только теперь за областью чтения вообще не было видно фона, а в этом-то и был весь смысл фона. Я по сути закрыл собой то, что сам же рисовал целую неделю.
В итоге остановился на матовой панели. У колонки есть фон, по большей части непрозрачный, но не полностью, плюс размытие позади него, так что остров и птицы всё ещё видны сквозь панель, но мягко, а у текста при этом есть достаточно плотная основа, чтобы на ней держаться.
.reading-panel {
background: var(--panel-bg); /* about 80% of the surface colour */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}То, что строка с -webkit стоит первой, это не для порядка. Сначала у меня было наоборот, обычная строка сверху, и размытие в сборке просто молча не работало. Оказалось, что CSS-минификатор, который использует этот проект, выбрасывает backdrop-filter без префикса, если он идёт перед строкой с webkit. Я довольно долго пялился на полупрозрачную, но не размытую панель, гадая, почему код ничего не делает, прежде чем это нашёл. Поменял строки местами, и размытие вернулось.
Баланс между читаемостью и прозрачностью тоже потребовал нескольких попыток. Слишком прозрачно, и текст плывёт, когда позади проезжает тёмный кусок горы. Слишком плотно, и фон снова теряется. В итоге я стал сверять контраст с самыми тёмными и самыми светлыми участками пейзажа, которые могут проехать за текстом, и держал непрозрачность выше той черты, за которой текст остаётся читаемым при любом фоне. Достаточно хорошо, и теперь у страницы действительно появилась глубина, а не вид плоской наклейки.
