#tinycsstip — Public Fediverse posts

#tinyCSStip Want the same border, but only for two edges, not for the others?

Don't set borders on the two edges to the same value, set border, then override border-width. If you later need to make the border thicker or thinner or pink or green, you only need to make that change in one place.

#CSS #cssBasics #code #coding #web #dev #webDev #webDevelopment #frontend

#tinyCSStip Create a fancy double border with dashes in between without any pseudos and with minimal #CSS!

The relevant code is just 3 simple CSS declarations!

Live demo on @codepen

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

#cssBasics #code #coding #frontend #web #dev #webDev #webDevelopment

#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

#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

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