Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hcaptcha-for-forms-and-more domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/cassenet/domains/cass-e.net/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hcaptcha-for-forms-and-more domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/cassenet/domains/cass-e.net/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wordpress-seo domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/cassenet/domains/cass-e.net/public_html/wp-includes/functions.php on line 6114
CSS Variable Colourizer - Cass-E Design

Cass-E Design

Design, Experiments, Games, Resources

CSS Variable Colourizer

The colouring on this site is done with CSS Variables, so here's a quick bit of Javascript to let us play with them ^^

If you don't care to read the link, here is the TLDR: CSS variables can effect parts of a calculation or gradient. With "normal" CSS you can only change the whole property. You can use them to do all kinds of things when you build a website. Today we're using it to play!

--main

--main is the background for the header, and most blocks/content with a solid background.

--main-accent

--main-accent is mostly used in gradients with --main

--main-text

--main-text is the colour of all plain text.

--secondary

The background colour for the site, header, and most body copy!

--secondary-accent

--secondary-accent is combined with --secondary to form the main background gradient.

--interactive

--interactive is the colour of links, buttons, inputs, and other clickables!

Next Post