Modern HTML & CSS Demos

Explore interactive patterns that used to require JavaScript—now achievable with native HTML and CSS. Click a card below to learn when, where, and how to use each feature.

Accordion

Collapsible sections with <details> and <summary>.

View Demo →

Dropdown Menu

Menus powered by :focus-within and :has().

View Demo →

Popover

Native tooltips and overlays with the popover attribute.

View Demo →

Container Queries

Components that adapt to their container size.

View Demo →

Scroll Snap

Smooth carousels and galleries with CSS scroll snapping.

View Demo →

Dialog

Accessible modals with the <dialog> element.

View Demo →

Form Validation

Built-in validation with HTML5 attributes.

View Demo →

Focus States

Accessible focus handling with :focus-visible and :focus-within.

View Demo →

Theme Toggling

Dark/light mode via prefers-color-scheme.

View Demo →

CSS Animation

Smooth transitions with @keyframes and animation.

View Demo →

Cascade Layers

Organize styles with @layer for predictable overrides.

View Demo →

Explaining the CSS Layout Code

This CSS snippet powers the layout and card design on this page: 

p.lead {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #555;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.card {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

Breaking Down the CSS

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
What it does: Creates a responsive grid layout.
How: - repeat() tells the browser to repeat a column pattern.
- auto-fit automatically fits as many columns as possible in the available space.
- minmax(220px, 1fr) means each column is at least 220px wide but can grow to take up available space (1fr).
When to use: For responsive card layouts that adapt to screen size.
transition: transform 0.2s ease, box-shadow 0.2s ease;
What it does: Smoothly animates changes to transform and box-shadow over 0.2 seconds.
How: - ease makes the animation start fast and end slow.
- Applies to hover effects or interactive states.
When to use: To make UI interactions feel polished and less abrupt.
transform: translateY(-4px);
What it does: Moves the element upward by 4 pixels.
How: Negative Y values move up, positive values move down.
When to use: For hover effects that give a “lifted” feel to cards or buttons.
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
What it does: Adds a shadow behind the element.
How: - 0 = no horizontal offset.
- 4px = vertical offset (shadow appears below).
- 12px = blur radius (softness of shadow).
- rgba(0,0,0,0.08) = color (black at 8% opacity).
When to use: To create depth and highlight interactive elements.