CSS Studies

*No UI script applied on this page

CSS Nesting

Example Title

Example paragraph with strong text

This site uses only pure CSS with nesting

<section class="example">
    <h1>Example Title</h1>
    <div class="example-cards">
        <div class="card"></div>
        <div class="card"></div>
    </div>
    <p>Example paragraph with <strong>strong text</strong></p>
</section>


.example {
    padding: 1rem 2rem;
    background-color: ghostwhite;
    h1 {
        font-size: 2rem;
    }
    .example-cards {
        display: flex;
        gap: 1.5rem;
        height: 20rem;
        padding: 1rem 0;
        .card {
            flex: 1;            
            border-radius: 0.5rem;            
            box-shadow: 0 0.5rem 0.5rem rgba(0 0 0 / 0.2);            
            &:first-child {
                background-color: antiquewhite;
            }
            &:last-child {
                background-color: palegreen;
            }
        }
    }
    p {
        font-size: 1.5rem;
        color: darkolivegreen;
        strong {
            font-size: 1.5rem;
            color: darkslateblue;
        }
    }
}

Scroll Snap

Scroll Snap Mandatory

Whith snap type mandatory, when the scroll bar pass the item, scroll automatically snap.

Scroll Snap by Proximity

With proximity snap type, scroll will snap when the item is near the container edge.

Animation Timeline: Scroll | Paralax

Try use horizontal scroll below

Animation Timeline: Scroll | Pac-Man

Try use vertical scroll below

Animation Timeline: View

Animation Timeline: View | Text

Malenia, Blade of Miquella

Malenia was born the child of Queen Marika the Eternal and her second husband, the Elden Lord Radagon. She had an elder twin brother by the name of Miquella. Both Malenia and Miquella were Empyreans, meaning they had the potential to one day replace their mother as a new god of a coming age. But since Radagon and Marika were in fact the same person, Malenia and Miquella were born afflicted. Malenia was afflicted with the Scarlet Rot, which ravaged her from within and would cost her several limbs, while Miquella was afflicted with eternal childhood, unable to ever grow into adulthood.

Malenia and Miquella were close, and Malenia would become her brother's sworn blade and protector, while Miquella worked tirelessly to try and undo the curses they had both been born into. While unable to find a cure for his sister, Miquella designed a needle of unalloyed gold that could keep the Scarlet Rot ravaging Malenia's body at bay.

Starscourge Radahn

Radahn was the son of Queen Rennala and Radagon, and became a demigod stepchild after his father's marriage to Queen Marika. He is regarded as the mightiest hero of the demigods, and was one of the strongest participants of the Shattering.

Radahn was born the son of Radagon, a champion of the Erdtree, and Queen Rennala, head of both the Carian Royal Family and Academy of Raya Lucaria. He had two siblings, Rykard and Ranni. Radahn inherited his father's flaming red hair, and was fond of its heroic implications. From a young age, he was enamored with the Elden Lord Godfrey. Attempting to emulate his idol, Radahn adorned his armor with lions, the symbol of Godfrey.

At some point, the first Elden Lord, Godfrey, was robbed of grace and hounded from the Lands Between. Radahn's father, Radagon, left Rennala to become Queen Marika's new consort and the second Elden Lord. Radahn and his siblings were thus raised to demigod status by their new step-mother, Marika.

@scope

Title outside scope

Title inside scope

Title after end scope

All H4 have generic color red applied.

The second and third H4 has color green applied, scoped to class "container-scope". Note that color only affect the third H4.

This happens because there are a second scope, applying blue color, initializing scope in "container-scope" class but finishing the scope in "container-end-scope" class.


<h4>Title outside scope</h4>

<div class="container-scope">

    <h4>Title inside scope</h4>

    <div class="container-end-scope">
        <h4>Title after end scope</h4>
    </div>
</div>


h4 {
    font-size: 2rem;
    margin: 1rem 0;
    color: red;
}

@scope (.container-scope) {
    h4 {
        color: green;
    }
}

@scope (.container-scope) to (.container-end-scope) {
    h4 {
        color: blue;
    }
}

Color Mix

sRGB

+
=

sRGB Linear

+
=

HSL

+
=

LCH

+
=

/*sRGB Red Blue*/
background-color: color-mix(in srgb, red, blue);

/*sRGB Linear Red Blue*/
background-color: color-mix(in srgb-linear, red, blue);

/*HSL Red Blue*/
background-color: color-mix(in hsl, red, blue);

/*LCH Red Blue*/
background-color: color-mix(in lch, red, blue);

sRGB

+
=

sRGB Linear

+
=

HSL

+
=

LCH

+
=

/*sRGB Red Blue*/
background-color: color-mix(in srgb, red, blue);

/*sRGB Linear Red Blue*/
background-color: color-mix(in srgb-linear, red, blue);

/*HSL Red Blue*/
background-color: color-mix(in hsl, red, blue);

/*LCH Red Blue*/
background-color: color-mix(in lch, red, blue);

CSS Anchor (The next awesome, incredible, amazing, CSS feature)

Custom Anchor Popover

This popover is positioned on left and bottom of it's anchor, the button.

Remember, popover is a fixed element pointed in document top layer. With CSS Anchor you can position an element by another element, regardeless the hierarchy, just by creating an anchor reference with CSS.

If you scroll the page, it will still be anchored using no javascript.


<button id="anchorButton" popovertarget="anchorPopover">
    Open Anchor Popover
</button>

<div id="anchorPopover" class="anchor-popover">
    ...
</div>


#anchorButton {
    anchor-name:  --anchor-button;
}

#anchorPopover {
    position-anchor:  --anchor-button;
    inset:  anchor(bottom) auto auto anchor(left);
}

Custom Anchor Popover | Top Down

This example work just like the first one. With an amazing feature, the position-try-fallbacks.

This dropdown will try to open down. But, if has no space, it will open up.

If you scroll the page giving few space to popover, it will change it's position, if already opened, or just open up.


<button id="anchorButtonTopDown" popovertarget="anchorPopoverTopDown">
    Open Anchor Popover | Top Down
</button>

<div id="anchorPopoverTopDown" class="anchor-popover">
    ...
</div>


#anchorButtonTopDown {
    anchor-name:  --anchor-button-top-down;
}

#anchorPopoverTopDown {
    position-anchor:  --anchor-button-top-down;    
    inset:  anchor(bottom) auto auto anchor(left);    
    position-try-fallbacks:  --anchor-bottom;
}

@position-try --anchor-bottom {
    inset:  auto auto anchor(top) anchor(left);
}