#7 Glass Weather Panel

Single-file HTML/CSS glassmorphism weather card. The stage on the left is live; below are why it works like this, a 5-step prompt ladder and a technique → industry map.

🎨 CSS · glass ⏱ 5 dk 🟢 easy 🌐 TR / EN frame · fill

No code on this page. To grab or customise the code, use the Open in Float button on the left: copy, split HTML/CSS/JS, React/Tailwind/Vue/Svelte and JSON spec all live there.

1. Structure: why like this?

The card has three layers: the glass layer (semi-transparent background + backdrop blur), the border layer (thin, semi-transparent) and the shadow (depth). On hover only two values change: transform (lift) and box-shadow (glow). That keeps the transition cheap — smooth on mobile too.

The internal layout is a grid: a header row, a temperature row and a 3-column stats grid. No fixed height is set; the card grows with its content. This prevents overflow with different data lengths.

2. Why glass?

Backdrop blur (backdrop-filter) softens the colours behind the card so it reads as glass. It has a cost: blur is recomputed every frame. That is why we keep the area small and use a single layer; blurring the whole screen drops frame rate on mobile.

Pitfall: where backdrop-filter is unsupported the card collapses to a flat colour. Fix: always give background a semi-transparent colour — it stays readable even without blur.

3. Prompt ladder (5 steps)

Five prompts that add capability step by step so an AI can build the same card. Each step adds exactly one thing on top of the previous one.

Skeleton: "Build a semi-transparent weather card on a dark background: city, temperature, 3 stats. No external libraries."
Glass: "Add to the same card backdrop-filter: blur(16px), a semi-transparent border and a soft shadow."
Motion: "Add a 5px lift and a glow on hover; transition 0.3s ease."
Resilience: "Add a readable fallback background when blur is unsupported; 44px touch targets on mobile."
Data: "Read city/temperature/humidity from a JS object and update it with two buttons (refresh, +1°)."

4. Technique → industry atlas

Layered transparency → aviation instrument panels, medical imaging overlays (readability + context).
Backdrop blur → iOS/macOS system UI, presentation software (focus separation).
Grid stats → finance dashboards, logistics tracking screens (fixed cells, variable data).
Hover feedback → e-commerce product cards, click affordance in learning platforms.
Single-file delivery → e-mail signature, trade-show kiosk, offline teaching material.

5. Test notes

Disable blur: is the card still readable? (Does the fallback background work?)
320px width: does the 3-column grid fit or overflow?
Keyboard: are buttons focusable, is the focus ring visible?
Low-power modee (mobile): does the hover animation stop?
Long city name: does the header row wrap, does the card grow?