Гаррі Поттер з ОДНОГО div: малюємо CSS-градієнтами крок за кроком

Малюємо Гаррі Поттера з одного порожнього div, лише градієнтами CSS: без картинок, SVG і дочірніх елементів. Код друкується по рядках, поруч видно, що змінюється в картинці і чому. Що буде у відео: • як розкласти малюнок на шари й збирати його ззаду вперед; • рецепт кожної деталі: сире, деформоване, на місці (розмір плитки, потім позиція); • чому позиція у відсотках рахується від вільного місця, і що виходить за край, не малюється; • різкі межі (колір зі значенням 0) і «гумки» кольору шкіри; • як з того самого коду зробити інші палітри: змінюється лише клас, шарф і color. Розділи: 0:00 Гаррі з нуля 0:10 Розкладка на шари 0:22 Основа: div, розмір, кути, тінь 1:03 Рецепт шару: волосся 1:38 Чубчик і пасмо 2:37 Шия й шарф 3:06 Окуляри 3:46 Очі 4:26 Шрам і доступність 4:55 Підсумок: чотири ідеї 5:17 Палітри: той самий код, інший факультет За мотивами пена Альваро Монторо: https://codepen.io/alvaromontoro/pen/qBPWRrP Музика й звуки згенеровані кодом, відео зібране в коді (HyperFrames). #CSS #фронтенд #градієнти