0.1.5 • Published 5 months ago
corner-smoothie v0.1.5
corner-smoothie
Create elements with Figma corner smoothing.
Usage
CSS Painting API (Recommended)
CSS.paintWorklet.addModule('<url-to-corner-smoothie-worklet>')
Using CDN (jsdelivr)
CSS.paintWorklet.addModule('https://cdn.jsdelivr.net/npm/corner-smoothie/dist/worklet.js')
Using Vite
import smoothieWorklet from 'corner-smoothie/worklet?url'
CSS.paintWorklet.addModule(smoothieWorklet)
Registering (Required)
!NOTE
registerProperties
relies on the CSS Properties and Values API, which has different browser compatibility.
import { registerProperties } from 'corner-smoothie'
registerProperties()
CSS Declarations
.my-element {
border-radius: 12px;
}
@supports (mask-image: paint(smoothie-mask)) {
.my-element {
--smoothie-border-radius: 12px;
--smoothie-border-smoothing: 0.6;
border-radius: 0;
mask-image: paint(smoothie-mask);
}
}
.my-element {
background-color: cyan;
border-radius: 12px;
}
@supports (background-image: paint(smoothie-background)) {
.my-element {
--smoothie-background-color: cyan;
--smoothie-border-radius: 12px;
--smoothie-border-smoothing: 0.6;
background-color: transparent;
border-radius: 0;
background-image: paint(smoothie-background);
}
}
The border-radius: 0
above can also be omitted, since smooth rounded corners are completely inside the tangent rounded corners.
Supported custom properties
--smoothie-background-color
: Alternative tobackground-color
. Available in background mode.--smoothie-border-color
: Alternative toborder-color
. Available in background mode.--smoothie-border-radius
: Alternative toborder-radius
. Available in BOTH modes.--smoothie-border-radius-smoothing
: A decimal between 0 and 1, akaξ
in Figma smoothing parameterized. The larger the value, the smoother the corners. Available in BOTH modes.- It is consistent with the iOS specification when specified as
0.6
.
- It is consistent with the iOS specification when specified as
--smoothie-border-width
: Alternative toborder-width
. Available in background modes.
JS API
import { createMaskImage } from 'corner-smoothie'
const mask = createMaskImage(
{ width: 72, height: 72 },
{ borderRadius: 12, borderRadiusSmoothing: 0.6 },
)
element.style.maskImage = mask
import { createBackgroundImage } from 'corner-smoothie'
const background = createBackgroundImage(
{ width: 72, height: 72 },
{ borderRadius: 12, borderRadiusSmoothing: 0.6, backgroundColor: 'cyan' },
)
element.style.backgroundImage = background
JS API is especially useful for browsers that do not support the CSS Painting API such as Firefox. You can use ResizeObserver
to have a similar experience to the CSS Painting API:
import { createMaskImage } from 'corner-smoothie'
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
if (entry.borderBoxSize.length) {
entry.target.style.maskImage = createMaskImage({
width: entry.borderBoxSize[0].inlineSize,
height: entry.borderBoxSize[0].blockSize,
}, {
// Normally you can't use the CSS Typed OM API
// because you only need to use the CSS Painting API in these browsers
borderRadius: parseFloat(getComputedStyle(entry.target).getPropertyValue('--smoothie-border-radius')),
borderRadiusSmoothing: 0.6,
})
}
}
})
observer.observe(element)
Some older browsers may not support
borderBoxSize
, you may need to usecontentRect
instead.
Differences between mask and background
Feature | Mask | Background |
---|---|---|
Corner radius | ✅ | ✅ |
Background image | ✅ | ❌ |
Border | ❌ | ✅ |
Overflow content | ❌ | ✅ |