Creates animation based on a timeline

:last-child, :nth-last-child(2), nth-child(2), nth-child(3n), nth-child(even), nth-child(odd), nth-child(n+3), nth-child(-n+3), nth-child(3n+1), nth-child(3n-1)

TL;DR Use HTML attributes with the content: attr() CSS property.

Here is an example with a notification icon with a counter nudge.

Minimal CSS to look great: 58 bytes, 100 bytes, and 100 more bytes.

Physical properties (margin, paddings) seems wrong: we need to specify intent in the design. That's why flow-relative or directions were introduced: inline-size, flexbox, block-size, ...

Examples of original icon hover effects 👍

Examples of original button effects 👍

Examples of original link effects 👍

Two circular navigation demos

A demo of 3 types of navigation menu with sublebels:

1. Overlapping levels
2. Covering levels
3. Overlapping levels with backlinks

CSS specificity as image 👍

You're encountering a flexbox default setting.

A flex item cannot be smaller than the size of its content along the main axis.

The defaults are...

• min-width: auto
• min-height: auto
  ...for flex items in row-direction and column-direction, respectively.

display: contents is underrated: it removes the box layout of the element!

grid-row or grid-column only works on explicit layout: workaround at 18:55

Why not :)

#idea #project fork it to provide a demo

Headings are not focusable because they are not interactive, as long as the headings are not links… ;)

Here an example of how to make focused element transition on focus:

section:focus {
  outline: 0;
  animation: yellowFade 3s forwards;
}
@keyframes yellowFade {
  from { background: lightYellow; }
  to   { background: white; }
}

and the code example: https://codesandbox.io/s/css-grid-blog-bonus-v2-nn7t2

Improved list designs. It's refreshing.

A simple, extensible CSS framework

Vanilla Framework aims for Level AA conformance with the Web Content Accessibility Guidelines (WCAG) 2.1.

Provide stats about the CSS on a page 👍

How CSS helped