Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
shape-outside.Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
shape-margin, без него текст начинает прилипать к объекту.Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач