#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
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
❤16🤬1
#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
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 #бородач
👍6❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Давайте в продолжение топика про современные методы реализации фигур, посмотрим на очередной их генератор.
Напомню, мы уже знаем как правильно рисовать треугольники и звёзды. Пришло время всего остального.
Встречайте: https://css-shape.com/
Их там какое-то невероятное количество, некоторые, с вырезами, даже конфигурируются!
Меня особенно Stamp и Grid Lines восхитили. Просто и элегантно.
#css #shape #clip
Давайте в продолжение топика про современные методы реализации фигур, посмотрим на очередной их генератор.
Напомню, мы уже знаем как правильно рисовать треугольники и звёзды. Пришло время всего остального.
Встречайте: https://css-shape.com/
Их там какое-то невероятное количество, некоторые, с вырезами, даже конфигурируются!
Меня особенно Stamp и Grid Lines восхитили. Просто и элегантно.
#css #shape #clip
👍14❤3
#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
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 #бородач
👍10❤3
#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
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 #бородач
👍10❤8🤩1
#фишка дня
С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, SVG в HTML, SVG в CSS, символам...
И я о функции CSS shape(). Для
Например, треугольник будет выглядеть так:
Выглядит просто? Ну так это потому что и определения простые. Вы только посмотрите, что сделали в CodePen (в смысле, в компании) для демонстрации мощи функции: https://codepen.io/t_afif/pen/JoovLam
Если честно, я пока не видел конверторов SVG в shape(), но уверен, они должны появиться.
Или это отличный шанс кому-нибудь блеснуть знаниями!
Впрочем, в Firefox пока поддержки нет :(
#css #shape #svg
С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, SVG в HTML, SVG в CSS, символам...
И я о функции CSS shape(). Для
clip-path.Например, треугольник будет выглядеть так:
.shape1 {
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}Выглядит просто? Ну так это потому что и определения простые. Вы только посмотрите, что сделали в CodePen (в смысле, в компании) для демонстрации мощи функции: https://codepen.io/t_afif/pen/JoovLam
Если честно, я пока не видел конверторов SVG в shape(), но уверен, они должны появиться.
Или это отличный шанс кому-нибудь блеснуть знаниями!
Впрочем, в Firefox пока поддержки нет :(
#css #shape #svg
👍15❤5🤡1
#инструмент дня
Вот вы такие посмеялись надо мной, когда я предложил сделать генератор кривых в CSS aka функция
напоминаю, в чём суть беседы: https://xn--r1a.website/htmlshit/3603
Из этого:
нужно сделать это:
Я знаю, вы любите простыню кода в постах!
так вот, Темани Афиф, автор уже известного вам проекта CSS Shape взял и сделал!
А не просто клоуна поставил, слыш ты
Пруф: https://css-generators.com/svg-to-css/
Да, поддерживается только одна кривая aka path aka атрибут d, но каков эффект!
Там, кстати, довольно сложные примеры есть. Одна кривая совсем не означает что-то непрерывное: перо же можно поднимать и опускать по координатам.
Как вам такой поворот, котаны?
#svg #css #shape #clip
Вот вы такие посмеялись надо мной, когда я предложил сделать генератор кривых в CSS aka функция
clip-path shape() из SVG, а это уже реальность!напоминаю, в чём суть беседы: https://xn--r1a.website/htmlshit/3603
Из этого:
M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z
нужно сделать это:
clip-path: shape(from 97.54% 10.91%,curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,close);
Я знаю, вы любите простыню кода в постах!
так вот, Темани Афиф, автор уже известного вам проекта CSS Shape взял и сделал!
А не просто клоуна поставил, слыш ты
Пруф: https://css-generators.com/svg-to-css/
Да, поддерживается только одна кривая aka path aka атрибут d, но каков эффект!
Там, кстати, довольно сложные примеры есть. Одна кривая совсем не означает что-то непрерывное: перо же можно поднимать и опускать по координатам.
Как вам такой поворот, котаны?
#svg #css #shape #clip
🤩24🤡9❤8