Geoff Graham

Classic Tricks

Timeless CSS gems

Article on Oct 6, 2021 Scroll Animation Chris Coyier Article on Oct 6, 2021 Yellow Flash Chris Coyier Article on Oct 6, 2021 Self-Drawing Shapes Chris Coyier Article on Oct 6, 2021 Scroll Shadows Chris …

The CSS ::view-transition-image-pair pseudo-element is part of the View Transitions API that lets us select the “before-and-after” snapshots in a view transition.

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

…

The CSS ::view-transition-image-new pseudo-element is part of the View Transitions API that lets us select the “new” snapshot that is transitioned to in a view transition.

::view-transition-image-new(*) {
  animation-duration: 700ms;
}

…

The CSS ::view-transition-image-old pseudo-element is part of the View Transitions API that lets us select the “before” snapshot in a view transition.

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

…

The CSS :popover-open pseudo-class is part of the Popover API that selects a popover element and styles the popover when it is in its “open” state.

/* Select any open popover */
:popover-open {
  /* Styles */
}

/* Select 

…

The ::view-transition-group pseudo-element selects one or more containers that group the pieces of an individual view transition.

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

See that transition-name identifier in the pseudo-element’s argument? That’s how we can select a particular view transition. View …

The main idea of CSS Container Queries is to register an element as a “container” and apply styles to other elements when the container element meets certain conditions.

The CSS ::view-transition pseudo-element is the top-level — or “root” — containing all animated transitions defined as CSS view transitions on the page.

::view-transition {
  position: fixed;
  inset: 0;
}

…

The CSS ::details-content pseudo-element provides a way to select and apply styles to the inner parts of a <details> element without leaking styles to the <summary>.

details::details-content {
  background-color: hsl(0 0% 0%);
}

Syntax

<element-selector::details-content {}

We say …

A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound.

Declaring the CSS anchor-name property on an element registers it as an “anchor” that we can use to position as a reference for positioning other elements.

.anchor {
  anchor-name: --my-anchor;
}

The property is one part of CSS Anchor Positioning, …