RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
A series of images of an avatar doing a bunch of skateboard tricks.
atom@argyleink
notecss

Combo light-dark() with Temani's great border-image techniques.

.card > figcaption {
  color: light-dark(#000, #fff);
  border-image: fill 0 conic-gradient(light-dark(#fff8, #0008) 0 0);
}

Try it on Codepen

light exampledark example

2 mentions #

15likes
3reposts
  • Brett Peary
  • BikeBot
  • Paul Shryock

Join the conversation on

Combo light-dark() with Temani Afif's great border-image techniques Try it on Codepen codepen.io/argyleink/pe... ⤷ nerdy.dev/adaptive-scrim
Adam ArgyleAdam Argyle
Any reason why not just use background instead of border-image?
Ana TudorAna Tudor