Clip Path

Style syntax for creating a clipping region.

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

Overview [sr-only]

clip-path:value / clip:valueclip-path: value
clip:noneclip-path: none
clip:marginclip-path: margin-box
clip:borderclip-path: border-box
clip:paddingclip-path: padding-box
clip:contentclip-path: content-box
clip:fillclip-path: fill-box
clip:strokeclip-path: stroke-box
clip:viewclip-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.