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
#tinyCSStip Know when you set a background gradient or a gradient mask and you get an ugly banding effect?
Tons of questions asked about this - the advice always is noise/ grain/ dither.
https://graphicdesign.stackexchange.com/q/8108/199818
That's a simple #SVG filter, but did you know you should be able to apply it to a #CSS gradient?
#cssGradient #cssMask #mask #gradient #borderImage #filter #svgFilter #grain #grainy #noise #dither #code #coding #web #dev #webDev #webDevelopment #frontend
π΄ The Complex But Awesome CSS border-image Property
by T. Afif @ChallengesCss at @smashingmag
#css #webdev #borderImage
https://www.smashingmagazine.com/2024/01/css-border-image-property/
The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstrates different approaches for using `border-image` to create clever decorative accents and shapes.
#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
Aligning with Interop 2023's emphasis on cross-browser consistency, this post walks you through various `border-image` properties that you can control to create captivating web designs. Learn how to use custom graphics for enhancing the look of your websites that appear consistent across different browsers.
Ana Tudor π―
pablolarah
Inautilo