#csstricks — Public Fediverse posts

#tinyCSStip to avoid repetition and make your code more maintainable! 🌟

If you set a stop position to a value smaller than that of the previous, it's taken to be equal to the previous!

Want an abrupt change at 30% between aqua and blue?

Just write `aqua 30%, blue 0`! 😎

#CSS #gradient #cssGradient #coding #code #webDev #dev #frontend #cssTricks #webDevelopment

#tinyCSStip Avoid ugly edges for CSS gradient circles!

❌ DON'T 😭
(abrupt change, no semi-transparent pixels at the edge, jagged look)
radial-gradient(circle, #202 5em, #0000 0)

✅ DO 😻
(semi-transparent edge pixels, smooth look)
radial-gradient(5em, #202 calc(100% - 1px), #0000)

#css #cssGradient #cssTricks #jagged #jaggedEdge #smooth #smoothEdge #code #coding #frontend #web #webDev #dev #webDevelopment

A `linear-gradient()` pattern coupled with a `linear-gradient()` map is what's behind this retro wave #CodePen demo https://codepen.io/thebabydino/pen/jOvMQMO

And animating the map's `background-position` is how we get this progressive close/ open blinds effect https://mastodon.social/@anatudor/110153344888593740

#css #filter #cssFilter #blending #blendMode #halftone #cssAnimation #code #coding #frontend #webDev #cssTricks #webDevelopment

Something I've been doing lately in terms of layout. Based on the DRY switching concept explained in this #cssTricks series of articles from over half a decade ago https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/

#css #layout #cssLayout #cssVariables #booleanLogic #code #coding #frontend #webDev #webDevelopment

Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!

#css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics