CSS-рисунок: динозавр
Динозавр, дерево, трава и полосатый пол нарисованы без единой картинки — только блоками div и свойствами CSS.
Как нарисован динозавр
Сцена — блок 320×320 пикселей с position: relative и overflow: hidden. Всё внутри позиционируется абсолютно: дерево прижато к правому верхнему углу, трава стоит на полу, а динозавр — отдельный контейнер 190×190, в котором лежат его хвост, тело, шея, голова, лапы и ноги. Благодаря такой вложенности динозавра можно двигать целиком, меняя всего два свойства контейнера.
Тело — овал с неровным border-radius: 48% 52% 47% 53% и радиальным градиентом. Светлое пятно смещено в точку 70% 70%, поэтому тело выглядит объёмным, будто свет падает сбоку. Голова и шея — такие же овалы, повёрнутые через transform: rotate(). Глаза и зрачки — маленькие эллипсы, ноздри — точки.
Самые интересные детали сделаны рамками. Ствол дерева, травинки и хвост — это блоки, у которых видимы только верхняя и левая стороны рамки, а правая и нижняя прозрачны. С большим border-radius такая рамка превращается в изогнутую дугу, и можно нарисовать ветку или лист без SVG. Зубы — классические CSS-треугольники: блок нулевого размера с толстой верхней рамкой и прозрачными боковыми. Три зуба стоят в ряд через display: flex.
Порядок слоёв задаёт z-index: ближняя лапа лежит поверх тела, дальняя — под ним, шея перекрывает тело, а голова — шею. Так плоские фигуры складываются в одну картинку с ощущением глубины. Пол — полоса с repeating-linear-gradient: жёлтые и оранжевые полосы повторяются каждые 42 пикселя, и не нужно рисовать каждую полоску отдельно.
На узком экране рисунок не сжимается, ведь все размеры заданы в пикселях. Вместо этого контейнер получает горизонтальную прокрутку overflow-x: auto, и картинка остаётся целой.
