Фоны для блочной модели (и чем она может быть полезна)
background-image элемента с помощью background-clip. Это означает, что можно применить различные фоны, скажем, к padding и border.На днях мне написали, что пытаются визуализировать различные части блочной модели. Они сказали, что напишут код для примера сами, но нет способа, скажем, задать цвет фона только для области padding элемента.
Они говорили о чем-то подобном — диаграмме блочной модели, доступной в DevTools:
Я сказал, думаю, что вы… можете! Вообще-то!
Хитрость заключается в использовании CSS свойства background-clip, позволяющего останавливать свойство background-image в разных точках блочной модели. Вот простой пример, как это сделать, используя те же цвета, что и в модели выше:
Единственное, что я подделываю
, — это внешняя форма (margin), которая нарисована с помощью outline. Тем не менее она соответствует значению margin, так что в принципе она настоящая!
Меня немного вдохновило желание продолжить, сделав все значения динамическими, поэтому я сделал вот это, где также обозначены секции.
Разместив вокруг него грид с контентом, я сделал так, чтобы было видно, как этот элемент отталкивает другие, как это делает настоящая блочная модель.
Действительно ли это полезно? Иногда!
Буквально на днях Wes Bos опубликовал очень красивый эффект кнопки, а затем воссоздал его в HTML и CSS:
Man I love this cool effect with CSS Conic gradients! pic.twitter.com/t25ELxOrc1
— Wes Bos (@wesbos) August 27, 2024
В том, как Wes сделал это, нет никакой серьёзной проблемы, но он использовал дополнительный элемент, а также псевдоэлементы. Вот его демо.
Ana Tudor ответила, что можно сделать и без дополнительных элементов, и угадайте как? Обрезка фона!
Я попробовал, и, если не считать неудобной необходимости задать background-size, думаю, у меня всё получилось:
Иногда это действительно может быть полезно. Например, CMS, которая рада выплюнуть элемент <button>, но не предлагает внутреннего HTML контроля над ним. Если вам это не нужно и вы можете полностью реализовать эффект в CSS, то вы в деле.
Я также решил попробовать использовать border-image, который, несмотря на то, что является самым критикуемым CSS свойством всех времён, кажется, по крайней мере, концептуально, правильным. Мне удалось заставить его работать!
Но по какой-то причине border-image несовместим с border-radius, так что, как ни крути, это отстой.