Nico Berlo @nico

0 posts0 participants0 posts today

**Ana Tudor** @anatudor@mastodon.social · Mar 23

#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

@property --f {
syntax: '<number>';
initial-value: 1;
inherits: true
}

.scale {
scale: var(--f);
animation: scale 2s ease-in-out infinite alternate;
/* no need for another animation on ::before to revert scale */

&::before { scale: calc(1/var(--f)) }
}

@keyframes scale { to { --f: .5 } }

#CSS #code #coding

**Ana Tudor** @anatudor@mastodon.social · Mar 20

Mar 20

Ana Tudor @anatudor@mastodon.social

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

```
.mytext { /* 🚫 DON'T */
text-shadow:
2px 2px 0 black,
-2px -2px 0 black,
-2px 2px 0 black,
2px -2px 0 black,
2px 0 0 black,
-2px 0 0 black,
0 2px 0 black,
0 -2px 0 black;
}

.mytext { /* ✅ DO */
-webkit-text-stroke: #000 4px;
paint-order: stroke fill
}
```

Screenshot showing the same text with the DON'T (text-shadow emulating outlines) vs. the DO (paint-order to fix inner strokes mess) tactic. The text-shadow method comes with corner issues and angled lines getting thickened.

#CSS #typography #code

Drag & drop to upload

Recent searches

Search options

Administered by:

Server stats:

#tinyCSStip

Recent searches

Search options

Administered by:

Server stats:

tinycsstip

#tinyCSStip