#conicgradient — Public Fediverse posts

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

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

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

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

9⃣ 473 ❤️ Pure #CSS 1 element rainbow spinner 2017 https://codepen.io/thebabydino/pen/YNjrRo - 1st remake of a thing I first coded in 2013.

I've since made 2 more versions with more modern (and better!) CSS:

2023 https://codepen.io/thebabydino/pen/poGyEyg
2019 https://codepen.io/thebabydino/pen/exwyby

#spinner #loader #cssGradient #conicGradient #meshGradients #rainbow #pastel #code #coding #frontend #web #webDev #dev #webDevelopment