Modern CSS Demos

Loading ...

@property --details-marker-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
}

details {
    --details-color: light-dark(#313131, #fafafa);
    --details-background-color: light-dark(#fafafa, #313131);
    --details-border-width: 0.0625rem;
    --details-border-radius: 0.5rem;
    --details-border-radius-start: var(--details-border-radius);
    --details-border-radius-end: var(--details-border-radius);
    --details-border-radius-inner-start: max(0px, calc(var(--details-border-radius-start) - var(--details-border-width)));
    --details-border-radius-inner-end: max(0px, calc(var(--details-border-radius-end) - var(--details-border-width)));
    --details-border-color: color-mix(in srgb, var(--details-background-color), var(--details-color) 20%);
    --details-padding-y: 1rem;
    --details-padding-x: 1rem;
    --details-space: 1rem;
    --details-marker-size: 1em;
    --details-marker-angle: 0deg;
    --details-animation-duration: .35s;

background-color: var(--details-background-color);
    color: var(--details-color);
    border: var(--details-border-width) solid var(--details-border-color);
    border-radius: var(--details-border-radius-start) var(--details-border-radius-start) var(--details-border-radius-end) var(--details-border-radius-end);
    margin: var(--details-space) 0;
    transition: --details-marker-angle ease-in-out var(--details-animation-duration);

summary {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: var(--details-padding-y) var(--details-padding-x);
        border-radius:
            var(--details-border-radius-inner-start)
            var(--details-border-radius-inner-start)
            var(--details-border-radius-inner-end)
            var(--details-border-radius-inner-end);

&:after {
            content: '';
            flex-grow: 0;
            flex-shrink: 0;
            height: var(--details-marker-size);
            width: var(--details-marker-size);
            rotate: var(--details-marker-angle);
            background-color: currentColor;
            mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='M9.586 8 6.05 11.536l.707.707L11 8 6.757 3.757l-.707.707z'/%3e%3c/g%3e%3c/svg%3e");
        }

&:hover {
            background-color: color-mix(in srgb, var(--details-background-color), var(--details-color) 5%);
        }

&:focus-visible {
            z-index: 1;
        }
    }

&[open] {
        --details-marker-angle: 90deg;

summary {
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }
    }

&::details-content {
        transition-behavior: allow-discrete;
        transition-property: opacity, translate, height, content-visibility;
        transition-duration: var(--details-animation-duration);
        transition-timing-function: ease-in-out;
        opacity: 0;
        translate: calc(var(--details-padding-x) * -.5);
    }

&[open]::details-content {
        opacity: 1;
        translate: 0px;
    }

.details-content {
        border-top: var(--details-border-width) dashed var(--details-border-color);
        padding: var(--details-padding-y) var(--details-padding-x);

>*:first-child {
            margin-top: 0;
        }

>*:last-child {
            margin-bottom: 0;
        }
    }
}

.details-group {
    > details {
        margin: 0;

&:not(:first-child) {
            --details-border-radius-start: 0px;
        }

&:not(:last-child) {
            --details-border-radius-end: 0px;
        }

& + details {
            margin-top: calc(var(--details-border-width) * -1);
        }

&:focus-within {
            z-index: 1;
        }
    }

margin: var(--details-space) 0;
}

/* interpolate-size */
details {
    interpolate-size: allow-keywords;

&::details-content {
        height: 0;
        overflow: clip;
    }

&[open]::details-content {
        height: auto;
    }
}

<details>
    <summary>Clara and the Lost Button</summary>
    <div class="details-content">
        <p>Clara found a small blue button on the sidewalk. It looked forgotten, so she picked it up.</p>
        <p>At school, she saw a boy searching the ground. “Lose something?” she asked.</p>
        <p>“My grandpa’s button,” he said.</p>
        <p>Clara smiled and held it out. “This one?”</p>
        <p>He nodded, eyes wide.</p>
        <p>She handed it over. “It was waiting for you.”</p>
    </div>
</details>

<details>
    <summary>Clara and the Quiet Tree</summary>
    <div class="details-content">
        <p>Clara found a fallen nest under her favorite tree. Two tiny eggs inside—safe, but far from home.</p>
        <p>She waited.</p>
        <p>A passing gardener noticed. “Need help?”</p>
        <p>Together, they returned the nest.</p>
        <p>Clara smiled. The tree stood quietly, watching.</p>
    </div>
</details>

<hr>

<div class="details-group">
    <details name="clara-story">
        <summary>The Discovery</summary>
        <div class="details-content">
            <p>
                It was on a quiet autumn morning when Clara stumbled upon the hidden
                path behind the old library. The air was crisp, and the leaves rustled
                like whispered secrets under her boots. At the end of the path,
                half-covered in moss, stood a weathered wooden door embedded into the
                hillside. She hesitated—then pushed it open.
            </p>
        </div>
    </details>
    <details name="clara-story">
        <summary>The Secret Room</summary>
        <div class="details-content">
            <p>
                Inside, the room smelled of parchment and candle wax. Dust motes
                danced in the sunlight pouring through a narrow crack above. Shelves
                lined with strange books filled the walls, and at the center stood a
                brass pedestal holding a single open journal.
            </p>
            <p>
                Its pages were filled with sketches of unfamiliar maps and notes
                written in hurried, looping script—signed by someone named E.L. Marlowe.
            </p>
        </div>
    </details>
    <details name="clara-story">
        <summary>The Decision</summary>
        <div class="details-content">
            <p>
                Clara returned every day, slowly piecing together the story of Marlowe's
                vanished expedition. The clues hinted at a hidden archive buried beneath
                the city. One morning, she packed a small bag, took a deep breath, and
                locked the door to the room behind her—for now. What lay ahead was uncertain,
                but she had made up her mind: she would follow the trail wherever it led.
            </p>
        </div>
    </details>
</div>

Zoom

Document

Container