mefody.dev

Блобы на CSS

Не уверен, как корректнее перевести Blob. Капля, пятно, клякса? Пусть будет блоб.

Хуан Диего Родригез делится тремя способами сделать блобы на CSS.

1. С использованием border-radius. На всякий случай напомню, что в это свойство можно передать аж 8 значений для разных осей, таким образом можно создать что-то похожее на пятно. Но оно всегда будет выпуклое, впуклости таким образом не нарисовать.

2. SVG-фильтры. Популярный рецепт: рисуете фигуры любым способом, добавляете размытие по Гауссу и фильтр контрастности. Размытие уберёт чёткие границы, а контрастность придаст блобу форму.

3. Новая функция shape(). Тут всё просто: как нарисуете, так и будет выглядеть.

Мне пока больше всего нравится способ №2 для анимаций, когда на фоне капли сливаются и перемещаются. Но устройства от таких анимаций начинают греться. А способ №3 пока не везде работает, нужно ждать Baseline Widely Available, чтобы не бояться.

https://css-tricks.com/css-blob-recipes/

CSS-Tricks

CSS Blob Recipes | CSS-Tricks

Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!

👍21❤9😱1

www.tgoop.com/mefody_dev/372

4.14K viewsJul 1 at 16:42

Блобы на CSS

Не уверен, как корректнее перевести Blob. Капля, пятно, клякса? Пусть будет блоб.

Хуан Диего Родригез делится тремя способами сделать блобы на CSS.

1. С использованием border-radius. На всякий случай напомню, что в это свойство можно передать аж 8 значений для разных осей, таким образом можно создать что-то похожее на пятно. Но оно всегда будет выпуклое, впуклости таким образом не нарисовать.

2. SVG-фильтры. Популярный рецепт: рисуете фигуры любым способом, добавляете размытие по Гауссу и фильтр контрастности. Размытие уберёт чёткие границы, а контрастность придаст блобу форму.

3. Новая функция shape(). Тут всё просто: как нарисуете, так и будет выглядеть.

Мне пока больше всего нравится способ №2 для анимаций, когда на фоне капли сливаются и перемещаются. Но устройства от таких анимаций начинают греться. А способ №3 пока не везде работает, нужно ждать Baseline Widely Available, чтобы не бояться.

https://css-tricks.com/css-blob-recipes/

BY mefody.dev