CSS Studies

*No UI script applied on this page

CSS Nesting

The first and amazing feature covered here is CSS Nesting. I believe this was one the main reason to use CSS Pre-processors instead of pure CSS. But now, CSS is releasing so many incredible features that pre-processors is become no longer necessary. See more

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 features are incredible to improve usability in a scroll area, with no scripts needed. See more

The sections in this page are snaping. Try use Spacebar, Pg Up or Pg Down keys to navigate smoothy between then.

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

With animation-timeline property using the Scroll() function, you can create an animation that progresses along with a container scrolling. This section contain a simple horizontal paralax animation using only CSS. In Scroll() function it's possible to specify the axis and the scroller that will run the animation. For example, passing the scroll(root) parameter, the animation will run on page scrolling, like the header bar animation of this page. See more

Try use horizontal scroll below

Animation Timeline: Scroll | Pac-Man

With animation-timeline property using the Scroll() function, you can create an animation that progresses along with a container scrolling. Below, there's a Pac-Man animation that runs through the vertical scroll of the container itself. See more

Try use vertical scroll below

Animation Timeline: View

Now, with animation-timeline property using the View() function, it's possible to run an animation when the object become visible in the screen. See more

Animation Timeline: View | Text

Another example controlling a text and image animatiosn when they become visible. See more

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

With @scope at-rule function, you can create an scoped section to apply styles. For example, you scope a selector to apply styles within and also define another selector to end scope. See more

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

With Color Mix you can mix two color values using different amount (percentage) combining then with a color method. Below, I put some examples mixing red + blue and yellow + blue using four different methods. Changing this color methods will result in distint mixed colors.

There are a plenty of methods to use and you can see all of then in documentation and also play in this pen

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)

Below, I demonstrate how to build and incredible Dropdown Popover with only HTML and CSS using no JS to manipulate position.


<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);
}


<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);
}