Shape

Clip Path

Style syntax for creating a clipping region.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`clip-path:value` `/` `clip:value`	`clip-path: value`
`clip:none`	`clip-path: none`
`clip:margin`	`clip-path: margin-box`
`clip:border`	`clip-path: border-box`
`clip:padding`	`clip-path: padding-box`
`clip:content`	`clip-path: content-box`
`clip:fill`	`clip-path: fill-box`
`clip:stroke`	`clip-path: stroke-box`
`clip:view`	`clip-path: view-box`
`clip:inset(…)`	`clip-path: inset(…)`
`clip:circle(…)`	`clip-path: circle(…)`
`clip:ellipse(…)`	`clip-path: ellipse(…)`
`clip:polygon(…)`	`clip-path: polygon(…)`
`clip:path(…)`	`clip-path: path(…)`
`clip:url(…)`	`clip-path: url(…)`

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="clip:inset(0|20px):hover clip:inset(0|20px)@sm clip:inset(0|20px)@dark clip:inset(0|20px)@print">…</div>

Scroll Snap Type

Style syntax for setting how strictly snap points are enforced on the scroll container.

Shape Image Threshold

Style syntax for setting the alpha channel threshold for a CSS shape.

MIT License © Aoyue Design LLC.

Issue on this page