#borderimage — Public Fediverse posts

Hey, look, this little thing got featured!

#CSS #cssGrid #cssLayout #borderImage #web #dev #webDevelopment #webDev #code #coding #frontend #fullBleed

Limited content width for section with full-bleed background on @codepen: two techniques https://codepen.io/thebabydino/pen/qEOjaaV

#CSS #cssGrid #cssLayout #fullBleed #borderImage #code #coding #frontend #web #dev #webDev #webDevelopment

2️⃣ 1076 ♥️ Simplest inner glow card animation https://codepen.io/thebabydino/pen/WNVPdJg - a super simple pure #CSS demo I made in a few minutes to answer a reddit question and never expected would even get noticed much. It was my only 2024 demo to make into the most hearted 100 Pens of the year on @codepen.

#cssFilter #borderImage #glow #code #cssGradient #conicGradient #coding #web #dev #webDevelopment #webDev #frontend

Know how border-image & border-radius don't play nice together?

(interactive https://codepen.io/thebabydino/pen/jxZyed)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: https://codepen.io/thebabydino/pen/qBELJGY?editors=1100

(and yes, this is a tip I first shared on twitter over half a decade ago https://x.com/anatudor/status/1219916121341644807 )

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius

#Development #Introductions
Border images in CSS · It’s time for widespread adoption of this feature https://ilo.im/15xgjs

_____
#WebDev #Browser #BrowserCompatibility #Frontend #CSS #BorderImage #Image #Interop #2023