wopian / smooth-corners Goto Github PK

View Code? Open in Web Editor NEW

193.0 3.0 6.0 8.35 MB

CSS superellipse masks using the Houdini API

Home Page: https://wopian.github.io/smooth-corners/

License: MIT License

JavaScript 100.00%

css houdini superellipse circle diamond rhombus ellipse rectangle square hypoellipse

smooth-corners's Introduction

Smooth Corners

Superellipse masks using the CSS Houdini API

Demo

Live demo featuring several different --smooth-corners values and an interactive editor

Limitations

To avoid leaking visited sites, the CSS Paint API is disabled on Chromium-based browsers for <a> elements with an href attribute and all children of that element. For further details see the following:

The CSS Painting API Privacy Considerations section
The CSS Painting API spec issue “CSS Paint API leaks browsing history”

To work around this limitation, mask-image: paint(smooth-corners) can be applied to the parent element of the <a> element, for example:

<div style='mask-image: paint(smooth-corners)'>
  <a href='https://github.com/wopian/smooth-corners'>Smooth Corners</a>
</div>

Usage

CSS

Add mask-image: paint(smooth-corners) to the elements you want to mask

Default (Squircle)

.squircle {
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: #d01257; /* So you can see it */
}

Customise Curvature

You can customise the mask curvature by using a CSS variable. This can be scoped locally to the selector or defined globally in :root {}

--smooth-corners: X[, Y]

X - Float, Curvature of the X axis
Y - Float, Curvature of the Y axis (optional, defaults to X axis)

Shapes by X value

0.6 - Astroid
< 1 - Concave rhombus
= 1 - Rhombus
> 1 and < 2 - Convex rhombus
= 2 - Circle
> 2 - Rounded rectangles
2.6 - KakaoTalk profile icon
4.0 - Squircle
5.0 - iOS app icon

Example

.mask {
  --smooth-corners: 3;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: #d01257; /* So you can see it */

Registering the Paint Worklet

Register with a CDN (preferred)

Use any CDN that serves packages from the NPM registry, for example:

<script>
  if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')
</script>

Register with a file path

Download paint.js or install with npm install smooth-corners

// src/assets/paint.js
import 'smooth-corners' // ES Modules

// src/assets/paint.js
require('smooth-corners') // CommonJS

Like Web Workers, the Paint Worklet API requests the module path in the browser during runtime and must be a seperate entryfile. This is not the path to the source code location.

<script>
  if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('/assets/paint.js')
</script>

Result

smooth-corners's People

Contributors

Stargazers

Watchers

Forkers

jwoo0122 carlbrn performautodev boorj amandagamlen ancosong

smooth-corners's Issues

Question for the border?

How do we apply it on Borders, not an image and background?

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset is invalid JSON (github>wopian/renovate-config)

Not Working on Latest Safari

I’m on newest Safari on my MacOS and iOS, the demo site isn’t rendering smooth corners in either. It does in Chrome!

Does not take effect on <a> tag with [href] attribute

Environment: chrome 91.0.4472.114

But it is possible on the tag without the [href] attribute

Smooth corners on rectangles

If I set a div with the following CSS, I don't get the correct shape.

.box {
  width: 200px;
  height: 100px;
  --smooth-corners: 4;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: #d01257;
}

Does this only work with squares?

Repository problems

These problems occurred while renovating this repository. View logs.

WARN: Use matchDepNames instead of matchPackageNames

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

build(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

build(deps): update actions/cache action to v4
build(deps): update devdependency semantic-release to ~23.0.0
build(deps): update semantic-release (major) (@semantic-release/commit-analyzer, @semantic-release/github, @semantic-release/npm, @semantic-release/release-notes-generator)
Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/auto-assign.yml

pozil/auto-assign-issue v1

.github/workflows/cd.yml

actions/checkout v4

actions/setup-node v4

actions/cache v3

.github/workflows/codeql-analysis.yml

actions/checkout v4

github/codeql-action v3

github/codeql-action v3

github/codeql-action v3

.github/workflows/lockfile.yml

actions/checkout v4

Simek/yarn-lock-changes 23b5437388098454b9d9c1574b50066b3338dbf1

.github/workflows/markdownlint.yml

actions/checkout v4

actionshub/markdownlint v3.1.4

npm

package.json

@semantic-release/changelog ~6.0.2

@semantic-release/commit-analyzer ~11.1.0

@semantic-release/github ~9.2.0

@semantic-release/npm ~11.0.0

@semantic-release/release-notes-generator ~12.1.0

microbundle ^0.15.0

semantic-release ~22.0.0

serve ^14.0.0

yarn 4.2.1

Check this box to trigger a request for Renovate to run again on this repository