Lmst

#conicGradient

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

Screenshot with DevTools open, showing each loader being created with a div with 4 other nested div elements, 2 span elements, 2 i elements and 2 pseudos inside.

Screenshot with DevTools open, showing each loader being created with only 1 div and its 2 pseudos.

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

First two base options. They look pretty much the same, no grainy glow and no roundings, so the sharp opaque end of the rotating conic gradient border doesn't look too great.

Variations on the second option. Both have a grainy glow and the second also rounds the end of the animated fading border.

#tinyCSStip Want to avoid ugly checkerboard edges when pattern size depends on viewport?

Round it to be a multiple of 2px so every square edge is an int number of pixels!

--s: round(10vmin, 2px);
background:
repeating-conic-gradient(red 0% 25%, tan 0% 50%)
0 0/ var(--s) var(--s)

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

Ugly (1px misalignment issues) checkerboard edges.

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

Also on the topic of circle sectors/ pie slices 🥧 - I've updated an old SO answer of mine https://stackoverflow.com/a/14185845/1397351

This goes through the simplest code possible in 2024 for a few cases (equal slices or not, interactive/ with content or not).

#CSS #cssGradient #Sass #conicGradient #clipPath #cssMaths #Maths #geometry #trigonometry #code #coding #frontend #web #dev #webDev #webDevelopment

Screenshot of the code + visual result in the simplest possible case: all the slices are equal and they don't need to be elements (interactive, holding text content).
```
.pie {
width: 16em; /* set width to desired pie diameter */
aspect-ratio: 1; /* make pie element square */
border-radius: 50%; /* turn square into disc */
/* equally sized slices */
background:
conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%,
#f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%)
}
```

If you're interested in checking out a lot of other modern and compact #CSS patterns, you can find them under the tag in my @codepen profile

https://codepen.io/thebabydino/pens/tags/?selected_tag=css-patterns

#pattern #cssPattern #grafient #cssGradient #conicGradient #code #coding #frontend #web #webDev #webDevelopment #dev

So this very subtle pure #CSS pattern got picked on @codepen https://codepen.io/thebabydino/pen/vYqbwLN

¯\_(ツ)_/¯

(only made it to provide an answer to a question someone asked... and I almost answered with "are you sure you uploaded the right image?" because the lines were so subtle I missed them at first)

#pattern #cssPattern #gradient #cssGradient #conicGradient #code #coding #frontend #web #webDev #dev #webDevelopment