GoogleChromeLabs / houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.
https://houdini.how
Apache License 2.0
152 stars 39 forks source link

(Worklet) Add cornerbox demo #156

Closed jerosoler closed 3 years ago

jerosoler commented 3 years ago

image

Demo: https://jerosoler.github.io/cornerbox/

google-cla[bot] commented 3 years ago

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

:memo: Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.


What to do if you already signed the CLA

Individual signers
Corporate signers

ℹ️ Googlers: Go here for more info.

jerosoler commented 3 years ago

@googlebot I signed it!

una commented 3 years ago

Thanks for this PR! I love this demo! A few questions:

  1. I notice that the corners are still slightly visible, even when --cornerbox-line is at 0. Is it possible to take this full off-canvas?
  2. I would have the range be from 0 for --cornerbox-line because I think this is a neat effect that can animate in
  3. The second variable --cornerbox-lenght has a typo, but might also make more sense to be called the --cornerbox-width instead. Similarly, I might rename --cornerbox-line to be --cornerbox-length, because it feels more descriptive
jerosoler commented 3 years ago

Hello @una

Thanks a lot! I like that you like it!

I have uploaded the corrections you indicate. You're right ;) Good work!

una commented 3 years ago

Nice one!