search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.7k stars 191 forks source link

Add `border-image` scrim style #437

Open argyleink opened 10 months ago

argyleink commented 10 months ago 
figure {
  border-image: fill 0 linear-gradient(#0003, #000);
}

https://codepen.io/t_afif/pen/vYbdVjb

argyleink commented 8 months ago

there's more!

https://www.smashingmagazine.com/2024/01/css-border-image-property/

Brian-Pob commented 8 months ago

This seems interesting and I would love to take a crack at making some of these. Though I would appreciate some guidance on where to start off 😄 What kind of variations did you have in mind? Different patterns, colors, opacities, etc?

argyleink commented 7 months ago

A good place to start is to make a Codepen that captures as many border-image one-liners as it can. There's some good precedence and background onto adding a set of props over here where we discussed masks.

workflow goes something like this:

  1. aggregate one-liner props into a central place and give them meaningful names
  2. when applicable, offer 1-3 variants
  3. iterate to find the right set
  4. add them to the src/ directory
  5. document them in the docsite
  6. add a build script entry
  7. add them to the exports in package.json

Step 1 is the fun part, same with step 2. If you want to start there I can certainly guide you through the rest 🙂