I like shorthands, I find them immensely useful. But it doesn't always make sense to drop it all in the shorthand and to have repetitions. Yeah, you can store that `.2s` in a #CSS variable. But is it really worth it if you're not even using it elsewhere in addition to not being dynamic?
Sometimes, if you notice a teeny tiny misalignment and you cannot understand why because *nothing* in your CSS looks like it could have caused it... try using `round()` to round to an integer number of pixels.
It just solved my own tiny misalignment problem that was driving me batty. 🦇
#CSS #cssMaths #code #coding #frontend #web #dev #webDevelopment #webDev
RE: https://mastodon.social/@anatudor/110688811266535252
Nowadays, we can do better:
```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```
Cross-browser since September 2024.
#tinyCSStip #CSS #code #coding #frontend #web #dev #webDev #webDevelopment
Because I often see this and it's a major #CSS pet peeve of mine, makes me want to scream "do you even understand what `cover` does?" at the screen every time...
#tinyCSStip We can have boolean logic in container queries!
And this works cross-browser!
Live test on @codepen: https://codepen.io/thebabydino/pen/QwbNNpz
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@container#logical_keywords_in_container_queries
#CSS #cssLayout #containerQuery #coding #web #dev #webDev #webDevelopment #code #frontend
#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
And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.
Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!
#CSS #tinyCSStip #blending #blendMode #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
#tinyCSStip `clip-path` or `mask` are applied after `filter`.
This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.
We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.
https://codepen.io/thebabydino/pen/BRROzw
#CSS #filter #cssFilter #clipPath #clipping #cssClipPath #cssMask #coding #frontend #web #dev #webDev #webDevelopment #code
#tinyCSStip Simplifying animations with variables and mathematical functions.
Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.
Live test on @codepen https://codepen.io/thebabydino/pen/MYWXgdZ
#CSS #Maths #code #coding #frontend #web #dev #webDev #webDevelopment
#cssMaths #trigonometry
#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.
https://codepen.io/thebabydino/pen/MYWXoZW
#CSS #code #coding #frontend #transform #web #dev #webDev #webDevelopment
Ana Tudor 🐯
