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

Create Beautiful Fullscreen Scrolling Websites

fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation, and both community and personal support.

The project is useful websites similar to slides or demos.

Avoiding media queries is possible but unreadable.

Some SCSS mixins make it more readable though: https://github.com/ryevych/adaptiveValueFunction/blob/main/scss/adaptiveValueFunction.scss

Two good examples are provided :)

A web component for drawing patterns with CSS

The images are actually impressive

And some figures: https://yuanchuan.dev/polygon-shapes