Пропорциональное изменение размера ≠ адаптивность. Если нужно именно пропорциональное изменение размера (чтобы вписывался в экран), используйте viewport-единицы для всего внутри блока (включая шрифты). В данном случае всё должно плясать от vw.
Плюс, я вижу закругление на краях, которого не было на скриншотах. Это закругление будет искажаться и этого не избежать. Проще отказаться от него (как на скриншоте в описании вопроса).
zeni1agent, не совсем понял вашей претензии к CSS, если вы уже всё знаете и если у CSS функций нет в принципе, чтобы можно было вместо свойства писать функцию. Иных решений вы не узреете; только в рамках языка. Сократить синтаксис записи CSS-переменной вы не сможете.
P. S. Не вижу абсолютно никакой проблемы в такой длине простого свойства с ровно одной переменной.
Вы с помощью CSS-переменной можете контролировать насыщенность и яркость принимая за основу исходный цвет. И менять цвет с помощью CSS в одной переменной без необходимости перекомпиляции.
Ну а вообще, не очень понимаю в чём прикол, если вы уже сделали классы нужного вам компонента. Опять, же, если у вас несколько одинаковых блоков с этими инпутами, но они различаются лишь только исходным цветом, то это удобно сделать на CSS-переменных для кастомизации. Меняется значение переменной в нужном месте — и вперёд с песней.
Антон Усачев, насчёт семантики согласен, а вот насчёт «повернуть» ничего не понял :))
Что мешает стилизовать или обращаться через JS к структуре div > img? Безо всяких проблем, оба простые блочные элементы, просто figure отягощен семантикой и условным предназначением для объединения контента внутри в единое целое.
Обособляют внутренний контент от контента родителя, позволяет создать собственное оглавление внутри. Важно при создании электронной книги, чтобы какие-нибудь автоматические читалки собирали структуру страницы. Ну а на всё это остальное выше (скрипты, стили) это не влияет никак.
RetardedDeveloper, если будет нужно менять плавно и производительно значение заливки, ставить фон на заливку, то тогда блоком надо делать (можно псевдоэлементом) + просто управлять степенью заливки с помощью JS:
У такого градиента, конечно, тоже можно менять размер, только это не будет производительно (он будет перерисовываться каждый раз).
https://google.gik-team.com/?q=sublime+text+3+auto...