Arkaive
Log in Sign up

First Impressions

I was experimenting with the new @function rule in CSS and realized it's a perfect tool for creating consistent box shadows. I created a simple function that accepts a color and transforms it into a shadow definition:

@function --custom-shadow(--color) {
    result: 0 12px 40px var(--color);
}

section:nth-of-type(2) {
    box-shadow: --custom-shadow(blue);
}

Initially, I thought I could achieve the same result using standard custom properties (the "old way"):

:root {
    /* same as function but the old way */
    --color: black;
    --custom-shadow: 10px 10px 10px
        color-mix(in srgb, var(--color) 30%, transparent);
}

section:nth-of-type(1) {
    box-shadow: var(--custom-shadow);
}

However, I quickly noticed a limitation: in this version, I cannot easily change the color on the element itself. The --custom-shadow variable in the :root is "locked" to the --color defined at that same level. If I redefine --color inside a section, the shadow doesn't update because custom properties flow from parent to child, and the root variable cannot "reach down" to see the child's local variable.

The @function solves this because it is executed at the call site, allowing it to use the specific color provided at the element level.

Improvements

To avoid hardcoding colors on every element, I wanted the flexibility to control the color globally while still using the function.
I tested passing a custom property as an argument to the function:

:root {
  --sectrion3: purple;
}

section:nth-of-type(3) {
    box-shadow: --custom-shadow(var(--sectrion3));
}

Now I can update the color in the :root, and the @function dynamically updates the shadow for every element using that variable.

fallback

In previous projects, I noticed that advanced colors (like those created with Relative Color Syntax) would sometimes fail to render in older browsers. To solve this, I combined the function with the @property rule for robust fallbacks:

ik een eerder project tijdens het testen op oudere browsers zag ik dat mijn kleuren niet overal op beeld kwamen, omdat ik soms met color function lichtere en donkere kleuren aan maakte

hiervoor heb ik de pseudo custom private property principe gebruikt als oplossing

conclusie

codepen