Background texture: The scan-line effect on this page uses an 18% opacity dark stripe in a 12px repeating tile. On the main site it is 3% opacity in a 4px tile — almost invisible. Here it is obvious so you can see exactly what the repeating-linear-gradient is drawing.
Tab illusion: The active tab above has no visible bottom edge — it appears to connect directly into the panel below. This is achieved with three things working together: (1) the shelf line from border-bottom on .tab-buttons, (2) each button nudged 6px downward with top:6px so it overlaps that line, and (3) the active button given a 6px border-bottom in the same colour as its own background, painting over the shelf line beneath it. The border is there — just invisible against the matching background.
Negative margin: The buttons use margin-right:-4px to make adjacent 4px borders overlap into a single line. Without it you would see an 8px gap between every pair of tabs where both borders meet.

The Hard-Edged Shadow

Entry 001  ·  tab title 1

The shadow on this card uses two layers with no blur at all — box-shadow: 10px 10px 0 #777, 12px 12px 0 #444. The zero where the blur radius goes is what keeps the edge sharp rather than soft. Each layer is offset by a further 2px to create a stacked, almost printed quality. In the main site the shadow is only 5–6px offset. Here it is 10–12px so you can clearly see the geometry.

The Scrollable Wrapper

Entry 002  ·  tab title 1

This entire card area sits inside a container with a fixed maximum height. Once the cards inside exceed that height, the container stops expanding and a scrollbar appears on the right edge. The page layout beneath — the footer, for example — stays in place. Only the card area scrolls. This is controlled by max-height and overflow-y: auto in the CSS. The scrollbar track and thumb on this page are styled to be 14px wide and dark — much more visible than the thin version on the main site.

A Third Card to Trigger Scrolling

Entry 003  ·  tab title 1

This card exists to push the wrapper past its maximum height so that the scrollbar actually appears. On this tab you should see a wide dark scrollbar on the right edge of the card area. If you resize your browser window to be very tall you may need to add a fourth card before the overflow kicks in — it depends on how much vertical space the wrapper has been given.

Border-bottom: none on inactive tabs: Every inactive tab has a full border on three sides but none on the bottom. This makes each tab appear open at the base — a visual cue that it connects to something below. Only the active tab completes the illusion by painting over the shelf line. Inspect an inactive tab and you will see the shelf line running straight through it uninterrupted.

What border-bottom: none Does

Entry 001  ·  tab title 2

In the CSS, every tab button has border: 4px solid #111 which draws all four sides, then immediately border-bottom: none which removes the bottom side only. The second rule overrides the first for that one side. CSS properties can be overridden in this way — the last rule that applies wins. The result is a U-shaped border: left, top, and right sides visible, bottom open. This is what makes a tab look like a folder tab rather than just a button.

z-index and the Shelf

Entry 002  ·  tab title 2

The active tab has z-index: 1 applied to it. Without this, the shelf line drawn by the container's border-bottom could render on top of the tab's covering border, and the illusion would break. z-index controls the stacking order of positioned elements — higher numbers appear in front of lower ones. The tab buttons all have position: relative, which is required before z-index has any effect. An element with its default static positioning ignores z-index entirely.

Flexbox on the tab row: The .tab-buttons container uses display: flex to lay buttons side by side. Without flex, buttons would stack vertically as block elements. flex-wrap: wrap allows them to spill onto a second line on narrow screens rather than overflowing. Try resizing this window very narrow to see wrapping in action.

Transition on Hover

Entry 001  ·  tab title 3

Hover over any inactive tab above. The background colour changes over 0.2 seconds — noticeably slow compared to the 0.12s used on the main site. The transition property takes the property name, then the duration: transition: background 0.2s, color 0.2s. You can list multiple properties separated by commas. Without transition the colour would snap instantly. Try setting it to 1s in demo.css to make the effect unmistakably obvious.

display: none vs display: block

Entry 002  ·  tab title 3

All tab panels have display: none by default — they exist in the HTML but are completely invisible and take up no space. The JavaScript function showTab() at the bottom of this page adds the active class to the chosen panel, and the CSS rule .tab-panel.active { display: block } overrides the none. Removing the class hides it again. This is the entire mechanism behind the tab switching — no complex logic, just adding and removing a single class.