#tinycodingtips — Public Fediverse posts

I was today years old when I learned this... want small caps?

Use `font-variant: small-caps`!

#TIL #tinyCodingTips #css

I was today years old when I learned this... want small caps?

Use `font-variant: small-caps`!

#TIL #tinyCodingTips #css

If you have 3 inputs for values of translation/ rotation/ scale along/ around the 3 axes and you want to update a CSS variable for each, here's how (not) to do it.*

*we assume we're using a translation:
transform:
translate3d(var(--x), var(--y), var(--z))

#css #tinyCodingTips

If you have 3 inputs for values of translation/ rotation/ scale along/ around the 3 axes and you want to update a CSS variable for each, here's how (not) to do it.*

*we assume we're using a translation:
transform:
translate3d(var(--x), var(--y), var(--z))

#css #tinyCodingTips

I got slapped with one of these and I thought I could make better button hover transitions than the one they use (which involve changing the button `color` and horizontally shrinking to nothing a span underneath the text).

So here it is, normal & slow motion with only 1 button element: https://codepen.io/thebabydino/pen/ExRqOGP?editors=0100

For the how behind the technique (+ more similar cool techniques), see my Taming Blend Modes: `difference` & `exclusion` article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

#css #CodePen #tinyCodingTips

I got slapped with one of these and I thought I could make better button hover transitions than the one they use (which involve changing the button `color` and horizontally shrinking to nothing a span underneath the text).

So here it is, normal & slow motion with only 1 button element: https://codepen.io/thebabydino/pen/ExRqOGP?editors=0100

For the how behind the technique (+ more similar cool techniques), see my Taming Blend Modes: `difference` & `exclusion` article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

#css #CodePen #tinyCodingTips

Because I saw a piece of #CSS used to illustrate the 1st principle of animation & almost screamed in horror...

❌ DON'T
.b { -webkit-animation: a 1s ease infinite alternate }

@-webkit-keyframes a {
0% { -webkit-transform: scaley(1.0) }
50% { -webkit-transform: translatey(-300%) scaley(1.2) }
100% { -webkit-transform: scale(1.0) }
}

✅ DO
.b { animation: a .5s ease-out infinite alternate }

@keyframes a {
to { transform: translatey(-300%) scale(.83, 1.2) }
}

Why? 👇
#tinyCodingTips #cssAnimation

Because I saw a piece of #CSS used to illustrate the 1st principle of animation & almost screamed in horror...

❌ DON'T
.b { -webkit-animation: a 1s ease infinite alternate }

@-webkit-keyframes a {
0% { -webkit-transform: scaley(1.0) }
50% { -webkit-transform: translatey(-300%) scaley(1.2) }
100% { -webkit-transform: scale(1.0) }
}

✅ DO
.b { animation: a .5s ease-out infinite alternate }

@keyframes a {
to { transform: translatey(-300%) scale(.83, 1.2) }
}

Why? 👇
#tinyCodingTips #cssAnimation

This is the little bit of #CSS code that does the magic of showing the "yay, supported!" box or the "sorry, not supported" one depending on whether the browser supports a particular feature (values, properties, selectors) or not.

Conditional display of info boxes depending on browser support and all in pure CSS, no JS needed.

#tinyCodingTips

This is the little bit of #CSS code that does the magic of showing the "yay, supported!" box or the "sorry, not supported" one depending on whether the browser supports a particular feature (values, properties, selectors) or not.

Conditional display of info boxes depending on browser support and all in pure CSS, no JS needed.

#tinyCodingTips

Something I've been including in my demos containing bleeding edge features lately: have two info boxes, one saying "yay, your browser supports [feature]!" and the other "sorry, your browser doesn't support [feature]." and toggle their display depending on support.

Live demo on #CodePen https://codepen.io/thebabydino/full/qBKvjKM

This is a pure #css support test, using `@​supports` - no JS is required.

Another example of such info boxes in my partial `grayscale(1)` demo: https://mastodon.social/@anatudor/109445767480226285

#tinyCodingTips

Something I've been including in my demos containing bleeding edge features lately: have two info boxes, one saying "yay, your browser supports [feature]!" and the other "sorry, your browser doesn't support [feature]." and toggle their display depending on support.

Live demo on #CodePen https://codepen.io/thebabydino/full/qBKvjKM

This is a pure #css support test, using `@​supports` - no JS is required.

Another example of such info boxes in my partial `grayscale(1)` demo: https://mastodon.social/@anatudor/109445767480226285

#tinyCodingTips

Bonus, this is also what helps solve a recent challenge (this one https://mastodon.social/@anatudor/109404963501056367): instead of a sharp gradient transition between transparent and grey, have a smooth one in order to progressively desaturate the top layer going from top (vibrant) to bottom (completely desaturated).

Live demos:

💫 https://codepen.io/thebabydino/pen/yLEjjWE

💫 https://codepen.io/thebabydino/full/xxzjJXL

#css #tinyCodingTips #CodePen #blending #cssChallenge2022

Bonus, this is also what helps solve a recent challenge (this one https://mastodon.social/@anatudor/109404963501056367): instead of a sharp gradient transition between transparent and grey, have a smooth one in order to progressively desaturate the top layer going from top (vibrant) to bottom (completely desaturated).

Live demos:

💫 https://codepen.io/thebabydino/pen/yLEjjWE

💫 https://codepen.io/thebabydino/full/xxzjJXL

#css #tinyCodingTips #CodePen #blending #cssChallenge2022

What if you wanted the filter: grayscale(1) effect to apply only to (a part of) the background?

There's filter() (https://www.w3.org/TR/filter-effects/#FilterCSSImageValue), but, while Safari has supported it since 2015, it's not in any other browser 😿

Better solution: blend with a grey (*any* grey works because all that matters is saturation being 0%) background-color or gradient layer underneath using luminosity! 🌟

Test https://codepen.io/thebabydino/full/qBKobME

Cool use case https://codepen.io/thebabydino/pen/KKgEqGZ

#css #CodePen #blending #tinyCodingTips

What if you wanted the filter: grayscale(1) effect to apply only to (a part of) the background?

There's filter() (https://www.w3.org/TR/filter-effects/#FilterCSSImageValue), but, while Safari has supported it since 2015, it's not in any other browser 😿

Better solution: blend with a grey (*any* grey works because all that matters is saturation being 0%) background-color or gradient layer underneath using luminosity! 🌟

Test https://codepen.io/thebabydino/full/qBKobME

Cool use case https://codepen.io/thebabydino/pen/KKgEqGZ

#css #CodePen #blending #tinyCodingTips

Want your absolutely positioned pseudo/ child to cover its entire parent?

❌DON'T
```
top: 0;
left: 0;
width: 100%;
height: 100%
```

or

```
top: 0;
right: 0;
bottom: 0;
left: 0
```

✅ DO
```
inset: 0
```

Live demo https://codepen.io/thebabydino/pen/xxXjBpO

`inset` is well supported and can take 1, 2, 3 or 4 values, just like `margin` or `padding`.

On MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Inset

#css #CodePen #tinyCodingTips

Want your absolutely positioned pseudo/ child to cover its entire parent?

❌DON'T
```
top: 0;
left: 0;
width: 100%;
height: 100%
```

or

```
top: 0;
right: 0;
bottom: 0;
left: 0
```

✅ DO
```
inset: 0
```

Live demo https://codepen.io/thebabydino/pen/xxXjBpO

`inset` is well supported and can take 1, 2, 3 or 4 values, just like `margin` or `padding`.

On MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Inset

#css #CodePen #tinyCodingTips

Saw https://getcssscan.com/css-shapes - the code for some of them (polygons, tooltips) is terribly outdated.

Here's how you make tooltips with *no pseudos* https://codepen.io/thebabydino/pen/dyKZRzy

`--i` & `--j` are all that differ between the four tooltip directions and indicate where the tooltip is along the horizontal & vertical axes respectively.

+more interesting ones

💫 gradient background https://codepen.io/thebabydino/pen/GRoxvOr
💫 border + text gradient & transparency https://codepen.io/thebabydino/pen/pogLXQP

#css #tinyCodingTips #CodePen

Saw https://getcssscan.com/css-shapes - the code for some of them (polygons, tooltips) is terribly outdated.

Here's how you make tooltips with *no pseudos* https://codepen.io/thebabydino/pen/dyKZRzy

`--i` & `--j` are all that differ between the four tooltip directions and indicate where the tooltip is along the horizontal & vertical axes respectively.

+more interesting ones

💫 gradient background https://codepen.io/thebabydino/pen/GRoxvOr
💫 border + text gradient & transparency https://codepen.io/thebabydino/pen/pogLXQP

#css #tinyCodingTips #CodePen

Bonus tip to the one @chenry shared https://mastodon.social/@chenry/109325956277772390 - you can have a `background` for an `<img>`.

This helps with getting a gradient `border` for the image when the image also has rounded corners or for a multi-gradient layer `border` pattern: https://codepen.io/thebabydino/pen/JjZNXoQ

Because `border-image` only accepts one gradient image (can't have more to get ⭐ or ❤️ patterns) & doesn't play nice with `border-radius` (https://codepen.io/thebabydino/pen/jxZyed).

#css #cssTips #tinyCodingTips #CodePen

Bonus tip to the one @chenry shared https://mastodon.social/@chenry/109325956277772390 - you can have a `background` for an `<img>`.

This helps with getting a gradient `border` for the image when the image also has rounded corners or for a multi-gradient layer `border` pattern: https://codepen.io/thebabydino/pen/JjZNXoQ

Because `border-image` only accepts one gradient image (can't have more to get ⭐ or ❤️ patterns) & doesn't play nice with `border-radius` (https://codepen.io/thebabydino/pen/jxZyed).

#css #cssTips #tinyCodingTips #CodePen

The `aspect-ratio` property relates to `box-sizing`.

Let's say we have `aspect-ratio: 4/ 3`

By default, this is the aspect ratio of the `content-box`.

But if we set `box-sizing: border-box`, 4/ 3 becomes the aspect ratio of the `border-box`.

Bonus, here's a cool little thing I've used `aspect-ratio` for: cards with 2 conic gradients at opposite corners, meeting along the diagonal in between the 2 corners https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/ (this should get easier with atan in CSS)

#css #tinyCodingTips

Something I've shared before (years ago on twitter):

DON'T ❌

@​keyframes b {
0% { color: tan }
49.99999% { color: tan }
50.00001% { color: red }
100% { color: red }
}

p { animation: b 2s infinite }

Instead, DO ✅

@​keyframes b { 50% { color: red } }

p {
color: tan;
animation: b 2s steps(1) infinite
}

Some examples of demos where I've used this:
✨ https://codepen.io/thebabydino/pen/BadYORM
✨ https://codepen.io/thebabydino/pen/vNxboo
✨ https://codepen.io/thebabydino/pen/yQewOm
✨ https://codepen.io/thebabydino/pen/MQeEed

#css #tinyCodingTips #CodePen

Want to get a square element with the edge a % value of its parent's `width` or `height`?

Normally, the `width` set in % is a % of the parent's `width` and the `height` set in % is a % of the parent's `height`. So how to get a square box whose edge is a % of either the parent's `width` or `height`?

Before, there was the padding hack (*but only* for the 1st case, edge being a % of parent `width`) https://nikitahl.com/css-aspect-ratio

But now we can do better with `aspect-ratio`! 🌟

#css #tinyCodingTips

Btw, there are a lot more #newGoodies coming to #css when it comes to theming.

For example, the ability to modify individual RGBa/ HSLa components without storing each into a variable. 🤯

So far, only in Safari as an experimental feature. Spec link: https://www.w3.org/TR/css-color-5/#relative-colors

#tinyCodingTips

Btw, there are a lot more #newGoodies coming to #css when it comes to theming.

For example, the ability to modify individual RGBa/ HSLa components without storing each into a variable. 🤯

So far, only in Safari as an experimental feature. Spec link: https://www.w3.org/TR/css-color-5/#relative-colors

#tinyCodingTips

You've probably used orientation media queries. But have you ever wondered which styles apply when the viewport is square?

Is it the landscape or the portrait ones?🤔

Well, just wondered about that & had to test. All browsers apply the portrait ones when the viewport is square.

If you want the landscape orientation styles applied when the viewport is exactly square, you can use an aspect ratio media query (for example, `min-aspect-ratio: 1/ 1`) 😼

#css #tinyCodingTips

You've probably used orientation media queries. But have you ever wondered which styles apply when the viewport is square?

Is it the landscape or the portrait ones?🤔

Well, just wondered about that & had to test. All browsers apply the portrait ones when the viewport is square.

If you want the landscape orientation styles applied when the viewport is exactly square, you can use an aspect ratio media query (for example, `min-aspect-ratio: 1/ 1`) 😼

#css #tinyCodingTips

✨ `:has()` boolean logic ✨

💫 OR - use comma-separated values inside `:has()`

💫 AND - use chained `has()` selectors

You can play with it here https://codepen.io/thebabydino/pen/KKeMLja

#css #tinyCodingTips #CodePen