Что такое CSS Paint API и зачем оно нужно?
CSS Paint API — это мощный инструмент, который позволяет создавать динамические и программируемые фоны (background) прямо в CSS, без использования изображений. С помощью JavaScript можно нарисовать что угодно и использовать это как фоновый стиль элемента.
Как это работает?
Определяем класс, который будет использовать кастомный фон.
Подключаем CSS Paint API в paintWorklet.
Реализуем свою "рисовалку" на JavaScript.
Пример кода
В файле paint.js:
registerPaint('my-paint', MyPaint);
Где это может быть полезно?
Динамические фоны без изображений
Генерация паттернов на лету
Оптимизация графики без перегрузки сети
#css | #полезности
CSS Paint API — это мощный инструмент, который позволяет создавать динамические и программируемые фоны (background) прямо в CSS, без использования изображений. С помощью JavaScript можно нарисовать что угодно и использовать это как фоновый стиль элемента.
Как это работает?
Определяем класс, который будет использовать кастомный фон.
Подключаем CSS Paint API в paintWorklet.
Реализуем свою "рисовалку" на JavaScript.
Пример кода
.my-element {
background: paint(my-paint);
}if (CSS && CSS.paintWorklet) {
CSS.paintWorklet.addModule('paint.js');
}В файле paint.js:
class MyPaint {
static get inputProperties() {
return ['--circle-color'];
}
paint(ctx, size, properties) {
const color = properties.get('--circle-color').toString() || 'blue';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(size.width / 2, size.height / 2, 30, 0, 2 * Math.PI);
ctx.fill();
}
}registerPaint('my-paint', MyPaint);
Где это может быть полезно?
Динамические фоны без изображений
Генерация паттернов на лету
Оптимизация графики без перегрузки сети
#css | #полезности
👍8
CSS-приемов, которые сэкономят вам часы работы
Знаете ли вы, что в CSS есть фичи, которые редко используют, но они могут упростить жизнь? Вот они:
- aspect-ratio – задает соотношение сторон элемента без костылей с padding-top.
- scroll-snap – плавная фиксация скролла, как в мобильных галереях.
- :empty – стилизация пустых блоков (удобно для динамического контента).
- gap во Flexbox – больше не нужны margin-хаки для отступов!
- @supports – проверка поддержки свойств в браузере.
#css | #полезности
Знаете ли вы, что в CSS есть фичи, которые редко используют, но они могут упростить жизнь? Вот они:
- aspect-ratio – задает соотношение сторон элемента без костылей с padding-top.
- scroll-snap – плавная фиксация скролла, как в мобильных галереях.
- :empty – стилизация пустых блоков (удобно для динамического контента).
- gap во Flexbox – больше не нужны margin-хаки для отступов!
- @supports – проверка поддержки свойств в браузере.
#css | #полезности
👍9