#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!

#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

#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

#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°)

#tinyCSStip

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

#tinyCSStip Simplest circle sector in 4 CSS declarations!

set width to desired diameter
square element with aspect-ratio
turn square into disc
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/

#tinyCSStip By default, grid items stretch to fill their respective grid areas (default for `place-self` is `stretch`).

Setting dimensions to `100%` is unnecessary & can even cause items to overflow their grid areas if you also set `margin`/ `border`/ `padding` without `box-sizing` being `border-box`.

#tinyCSStip Want to look inside various inputs, see how they're styled and maybe even change those styles?

Chrome: DevTools Settings > Preferences > Elements > Show user agent shadow DOM

Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true

#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)

#tinyCSStip (or gotcha) If you want to get the correct result when using smth like
atan2(var(--y), var(--x))
with --y and --x having different units...

then you need to register --x and --y as length values!

Or how I lost > 30min trying to figure out why my angle was 4° off...

#tinyCSStip Want a box with a fixed aspect-ratio which always touches either the horizontal or the vertical edges? Use CSS `min()` for both the `width` and the `height`.

Live test on @codepen https://codepen.io/thebabydino/pen/vYweqoz

Because I saw https://www.reddit.com/r/webdev/comments/1ddltxg/how_do_i_add_a_div_with_fixed_aspect_ratio_that/ and yikes!

#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)

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

background layering a pattern and a map
blend mode multiplication of the two layers
contrast bump up to push all greys to either black or white

#tinyCSStip (#gotcha)

`text-shadow` is drawn relative to original unstroked text. So if you set a `text-shadow` and also a thicker text stroke (supported cross-browser for years now with the `-webkit-` prefix https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke), the shadow gets drawn *under* the stroke.

To get a visible shadow relative to the stroked text, use `filter: drop-shadow()` https://mastodon.social/@anatudor/111325570560270740

#tinyCSStip The `writing-mode` property gives us an easy way to have sideways text without any weird transform hacks.

And helps with effects like the one below (which sadly *still* depend on the font, even when setting `line-height: 1cap` ).

#tinyCSStip

overflow-wrap: anywhere

prevents long words from overflowing or expanding their containing element beyond what we want.

The text effects below all use this!

#CSS #typography #textEffect #code #coding #frontend #webDev, #webDevelopment #SVG #SVGFilter #filter

#tinyCSStip One thing that has always annoyed me about `:empty` is that it doesn't work for elements that have text content, but no element children.

`:has()` fixes this problem.

`:not(:has(*))` selects elements that don't have element children, even if they have text content.

Here's a pure CSS version that also has an auto option based on a `prefers-color-scheme` MQ.

And now you know why I was asking this a few months ago https://twitter.com/anatudor/status/1715014962874040353 just having text options got boring after about a year

Live demo https://codepen.io/thebabydino/pen/eYxOmRY?editors=1100

#tinyCSStip Want mono emojis of various hues? Use CSS filters!

brightness(0) ⇒ black emoji
invert(x%) ⇒ hsl(0, 0%, x%)
sepia(1) ⇒ pretty desaturated, lighter or darker yellow depending on x% (hue≅40)
hue-rotate(a) ⇒ move around hue wheel by a
saturate(v), v>1

On #CodePen https://codepen.io/thebabydino/pen/PoQEqxg

A little trick I've been using for a few years.

Wake up, wake up, wake up!¹

`background-clip: text` is now supported unprefixed and in the shorthand in all browsers!
#tinyCSStip

¹bonus points if you can identify the Lamb of God song²

²I hope I didn't scare you³... if I did, try out the `background-image` link below

³that's just the way we are when we come down... sorry, can't help all the song references, they just come to me

#CodePen https://codepen.io/thebabydino/pen/mdobMYd