#tinycsstip — Public Fediverse posts

#tinyCSStip

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?

#tinyCSStip

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

#tinyCSStip

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

#tinyCSStip

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

#tinyCSStip

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

#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

#tinyCSStip

🚫 DON'T use layered text-shadows for text outlines just because text-stroke is broken (https://mastodon.social/@anatudor/112410224855133935), they are going to produce ugly corners, thickened roundings and angled lines.

✅ DO: use `paint-order: stroke fill` instead!

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

Know how border-image & border-radius don't play nice together?

(interactive https://codepen.io/thebabydino/pen/jxZyed)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: https://codepen.io/thebabydino/pen/qBELJGY?editors=1100

(and yes, this is a tip I first shared on twitter over half a decade ago https://x.com/anatudor/status/1219916121341644807 )

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius

Also, those letters in the squares? #CSS counters!

```
.item { counter-increment: c }

.item::after { content: counter(c, upper-alpha) }
```

#tinyCSStip #cssCounter #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 if you want to make an absolutely positioned pseudo cover its parent's entire `padding-box`, use `inset: 0`!

(love grid for stacking/ full coverage too, but there are differences between how the two solutions work and there are cases when absolute positioning is still preferable)

#CSS #code #coding #frontend #layout #web #dev #webDev #webDevelopment #cssLayout

#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

Pretty sure I've posted about this before, but a quick search at the morning hours didn't find it, plus I saw someone ask about it yet again¹, so... fixed aspect-ratio box within variable size container!

Live on @codepen https://codepen.io/thebabydino/pen/ogvZdoZ?editors=1101

¹here https://www.reddit.com/r/css/comments/1hhf4x3/comment/m2s81yr/

#CSS #aspectRatio #code #coding #web #frontend #dev #webDevelopment #webDev #containerQuery #containerQueryUnits #container

#tinyCSStip

Ever want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?

Well, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!

mask:
conic-gradient(red 0 0) no-clip subtract,
var(--masked-area)

@codepen demo: https://codepen.io/thebabydino/pen/MYggKre

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

#tinyCSStip

Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?

Well, `@​supports selector()` to the rescue!

Live test on @codepen

#CSS #HTML #cssSelector #code #frontend #webDev #web #dev #webDevelopment #coding

#tinyCSStip

Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?

Well, `@​supports selector()` to the rescue!

Live test on @codepen

#CSS #HTML #cssSelector #code #frontend #webDev #web #dev #webDevelopment #coding

#tinyCSStip

Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?

Well, `@​supports selector()` to the rescue!

Live test on @codepen

#CSS #HTML #cssSelector #code #frontend #webDev #web #dev #webDevelopment #coding

#tinyCSStip

Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?

Well, `@​supports selector()` to the rescue!

Live test on @codepen

#CSS #HTML #cssSelector #code #frontend #webDev #web #dev #webDevelopment #coding

#tinyCSStip

Range input browser inconsistencies may mean needing different styles for different browsers. Possible for track & thumb via different pseudos, but what about the actual range input?

Well, `@​supports selector()` to the rescue!

Live test on @codepen

#CSS #HTML #cssSelector #code #frontend #webDev #web #dev #webDevelopment #coding

#tinyCSStip

Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`, which was given as a hex or keyword value?

No need to convert to rgb() or hsl() anymore!

#CSS #code #coding #frontend #webDev #web Dev #webDevelopment

#tinyCSStip Want your page background to contain an integer number of dots?

Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 🥳

Live on @codepen https://codepen.io/thebabydino/pen/RwXvryZ

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

#tinyCSStip Container queries on the body? Why, when media queries have better support?

Well, container queries make it an IF depending on the width of the body's content-box.

That is, subtracting the scrollbar IF we have one (we can't know).

**Heavily** commented @codepen demo https://codepen.io/thebabydino/pen/ZEgjpYL

#CSS #container #containerQuery #layout #cssLayout #grid #cssGrid #frontend #code #web #dev #webDev #webDevelopment #coding #containerQueryUnits

#tinyCSStip/ fun fact: same aspect ratio is also what we need for a regular hexagon because that can made up of only equilateral triangles!

We just need more points for the clip-path (6 for a hexagon vs. 3 for a triangle).

#CSS #cssMaths #trigonometry #maths #mathematics #frontend #code #coding
#web #dev #webDevelopment #webDev #hexagon

#tinyCSStip Want to create a triangle with all edges equal in 4 simple #CSS declarations?

Such a triangle also has all vertex angles equal = (sum of angles in a triangle)/3 = 180°/3 = 60°

👉 https://en.wikipedia.org/wiki/Sum_of_angles_of_a_triangle

Knowing its edge length a, its height is a·sin(60°).

Aspect ratio of the box
a/(a·sin(60°)) = 1/sin(60°)

#cssMaths #Maths #Mahematics #code #trigonometry #triangle #coding #webDev #frontend #web #webDevelopment #dev

#tinyCSStip

`:is()` is such a great new-ish #CSS feature that helps eliminate repetition in selectors ✨

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

#tinyCSStip

`:is()` is such a great new-ish #CSS feature that helps eliminate repetition in selectors ✨

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

#tinyCSStip

`:is()` is such a great new-ish #CSS feature that helps eliminate repetition in selectors ✨

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

#tinyCSStip

`:is()` is such a great new-ish #CSS feature that helps eliminate repetition in selectors ✨

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

#tinyCSStip

`:is()` is such a great new-ish #CSS feature that helps eliminate repetition in selectors ✨

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

#tinyCSStip If you don't need the start angle and the sector angle to be decoupled, you can simplify things by making the sector angle depend on the start one. 💡

4 base declarations + 1 simple animation = magic! 🪄

All pure #css

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

#tinyCSStip Simplest circle sector in 4 CSS declarations!

1⃣ set width to desired diameter
2⃣ square element with aspect-ratio
3⃣ turn square into disc
4⃣ conic-gradient() magic! 🪄

The start angle and sector angle can also be animated for fun results.

Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/

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

Because I just saw a checkerboard pattern done with 4 CSS gradients: you don't need to overcomplicate! 🏁

A single conic gradient does it! ✨

Detailed explanation of the how behind this + other patterns https://css-tricks.com/background-patterns-simplified-by-conic-gradients/

#tinyCSStip #CSS #cssPattern #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

#tinyCSStip Double stop position is well-supported and has been well-supported for about half a decade, so there's no reason not to use it!

❌ DON'T 😬
orange 40%, hotpink 0, hotpink 60%, purple 0

✅ DO 😎
orange 40%, hotpink 0 60%, purple 0

Also see:
https://codepen.io/thebabydino/pen/XWJOJRQ

#css #gradient #cssGradient #code #web #dev #coding #frontend #webDev #webDevelopment

#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 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 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 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 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 Know when you set a background gradient or a gradient mask and you get an ugly banding effect?

Tons of questions asked about this - the advice always is noise/ grain/ dither.

https://graphicdesign.stackexchange.com/q/8108/199818

That's a simple #SVG filter, but did you know you should be able to apply it to a #CSS gradient?

#cssGradient #cssMask #mask #gradient #borderImage #filter #svgFilter #grain #grainy #noise #dither #code #coding #web #dev #webDev #webDevelopment #frontend

#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

Notes:
✨ yes, there are still valid use cases for `position: absolute` pseudos instead of `grid`
✨ no, that `padding` wasn't relevant later

#css #cssTrick #cssTip #code #coding #frontend #web #webDev #dev #webDevelopment

#tinyCSStip What if you need to set `color` to the inverted value of a CSS variable? You can't invert the whole element because the rest of it shouldn't be inverted. And you can't use the Sass `invert()` on a CSS var.

Here's how! 👇

(see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors for more details)

#css #cssVariable #code #coding #rgb #frontend #web #webDev #webDevelopment #dev

#tinyCSStip What if you need to set `color` to the inverted value of a CSS variable? You can't invert the whole element because the rest of it shouldn't be inverted. And you can't use the Sass `invert()` on a CSS var.

Here's how! 👇

(see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors for more details)

#css #cssVariable #code #coding #rgb #frontend #web #webDev #webDevelopment #dev

#tinyCSStip What if you need to set `color` to the inverted value of a CSS variable? You can't invert the whole element because the rest of it shouldn't be inverted. And you can't use the Sass `invert()` on a CSS var.

Here's how! 👇

(see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors for more details)

#css #cssVariable #code #coding #rgb #frontend #web #webDev #webDevelopment #dev