RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit 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

Join the conversation on

15 likes
3 reposts
  • Brett Peary
  • BikeBot
  • Paul Shryock
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

Crawl the CSS Webring‽