Repeating Square Dots Backgrounds in CSS

https://fed.brid.gy/r/https://frontendmasters.com/blog/repeating-square-dots-backgrounds-in-css/

Variable aspect ratio cards with conic gradients meeting along the diagonal.

First coded this when we didn't have inverse trigonometric functions in #CSS - can you figure out how on your own?

@csstricks post https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/

@codepen demo https://codepen.io/thebabydino/pen/XWpyowX

#code #CSSMaths #trigonometry #Maths #cssGradient #conicGradient #coding #web #dev #webDev #webDevelopment #frontend

Outer + inner border for hue ring - 3 methods with a single div, no pseudos, all described in this public Ko-fi post: https://ko-fi.com/post/Outer--inner-border-for-hue-ring--3-methods-A0A51M5XBA

Live demo on @codepen https://codepen.io/thebabydino/pen/RNraELd

Best part? In practice, you'll need to use more than one because none works cross-browser.

#CSS #mask #cssGradient #coding #conicGradient #code #frontend #web #dev #webDev #webDevelopment

Remake of an old, old @codepen animation with 2025 #CSS https://codepen.io/thebabydino/pen/jOZPZL

Now using `conic-gradient()` + `mask` instead of an SVG segments ring image. CSS `grid` for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more, check it out! 🐱

Original code preserved in Pen description for web history.

#conicGradient #cssGradient #code #coding #frontend #cssGrid #cssLayout #web #dev #webDev #webDevelopment #containerQueries

I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)

cc @bramus

#scrollAnimation #code #coding #frontend #cssGradient #cssMask #conicGradient #cssMaths #maths #scrollEffect #cssGrid #web #dev #webDev #webDevelopment

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

#cssMask #cssGradient #conicGradient #maths #trigonometry #Sass #loader #web #dev #webDev #webDevelopment #code #coding #frontend #cssAnimation

A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW

#CSS #loader #spinner #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient #cssMask #conicGradient #cssSpinner #cssLoader #singleDiv #oneDiv

Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.

But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!

Heavily commented on @codepen https://codepen.io/thebabydino/pen/KwPBvzo

#cssGradient #conicGradient #code #web #dev #webDev #webDevlopment #frontend #coding #cssAnimation #rainbow

Because somebody asked how to fix an animated border glow effect on scroll entry (https://www.reddit.com/r/css/comments/1i1ts9q/comment/m79twbr/), here's my take on @codepen

https://codepen.io/thebabydino/pen/raBKVRG

Four options in the demo. Well, two, the last two are just enhancing the second.

#CSS #SVG #filter #svgFilter #code #web #dev #webDev #webDevelopment #coding #frontend #cssGradient #conicGradient #glow