#заметка дня

Плоские интерфейсы вошли в нашу жизнь лет 10 назад и уходить не собираются.

Набора из linear-gradient, box-shadow, drop-shadow, border-radius хватает практически на всё. Вот такое сверстать не проблема: https://codepen.io/joshnh/pen/DmdxLY

Но так было не всегда и до сих пор в игроподобных интерфейсах можно заметить весьма сложно оформленные элементы. Например, кнопки с орнаментом. Как же их верстать?

На помощь приходят таблицы и т. н. техника сдвижных дверей (sliding doors).

Другое название таблиц — 9-slice scaling. Есть плагины для Figma, позволяющие легко резать картинки. В итоге остаётся сверстать, используя background-repeat, псевдоэлементы или border-image.

Суть же дверей в том, что у вас есть один неподвижный элемент с достаточно длинным нужным паттерном и второй — это его завершение. Раньше решалось двумя тегами, а нынче — псевдоэлементы решают: https://codepen.io/chriscoyier/pen/rZPPOd

Если интересно — следующим постом могу дать больше примеров. Голосуем 🙂

#css #button #9slice

#фишка дня

Когда в комментариях говорят, что что-то можно сделать гораздо проще, а после этого берут и делают — можно легко словить интеллектуальный экстаз.

Вот сказал я, берёте картинку, режете на 9 кусочков — и долбитесь в псевдоэлементы... А подписчик, мол, дядя, на дворе 2023 год, пора бы научиться в border-image. И я такой: «А, чо? В смысле?».

Короче, это я к тому, что свиток на картинке из поста выше верстается в один элемент и одну строку CSS!

Ну вот, посмотрите: https://codepen.io/mdss/pen/KKxEJWQ

Развиваемся, котаны. Развиваемся.

#css #border #9slice