Обычно для таких эффектов используют изображения, SVG, canvas или JavaScript. Мне стало интересно, насколько далеко можно зайти, если ограничиться только HTML и CSS - без единой картинки и без скриптов. В результате получилась небольшая сцена: светящаяся Луна, мягкое ночное небо, кратеры, звёзды и лёгкая анимация движения. Всё это - средствами CSS. Полный исходный код проекта с комментариями я выложил отдельно - ссылку оставил в конце статьи. Ниже - видео, где я шаг за шагом собираю эту анимацию, используя только HTML и CSS...

Привет! Ты когда-нибудь задумывался, как на некоторых сайтах делают такие классные эффекты с фонами — например, затемненные фотографии с текстом, красивые наложения цветов или даже целые рисунки без использования картинок? Сегодня я расскажу тебе о секретном оружии веб-разработчиков — множественных фонах в CSS! Это как если бы у тебя было несколько прозрачных листов бумаги, которые ты накладываешь друг на друга, создавая классную многослойную картинку. Звучит интересно? Тогда поехали! Перед тем как мы погрузимся в множественные фоны, давай быстро вспомним, что такое свойство background в CSS...