Text Grid With Mouse Interaction

14.12.2020

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderText Grid With Mouse Interaction

Css Variables With Shadow Lists

6.12.2020

A couple examples of how CSS variables can hold some or all of a list of box-shadows.

Made with: HTML,CSS

View Code

Css Variables With Shadow Lists

Playing With Css Variables

3.12.2020

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

PlaceholderPlaying With Css Variables

His Dark Materials Tv Series Logo With Css

17.11.2020

Made with: HTML,CSS (SCSS)

View Code

His Dark Materials Tv Series Logo With Css

Theming With Custom Properties

1.11.2020

Made with: HTML,CSS

View Code

Theming With Custom Properties

Dark Mode With Css Variables

1.09.2020

Made with: HTML,CSS,JS

View Code

PlaceholderDark Mode With Css Variables

Fit Text With Css Variables

19.03.2020

Made with: HTML,CSS,JS

View Code

Fit Text With Css Variables

Random Bubble Scene Using Variable Scope

6.11.2019

Made with: HTML (Pug),CSS (Stylus)

View Code

PlaceholderRandom Bubble Scene Using Variable Scope

Svg Animation With Speech Recognition

4.05.2019

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

PlaceholderSvg Animation With Speech Recognition

Dynamic Css @Keyframes With Css Vanilla

16.04.2019

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderDynamic Css @Keyframes With Css Vanilla

Sizing Areas With Custom Properties

19.03.2019

Illustrates a technique to control the sizing of different areas on your website using CSS custom properties.

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderSizing Areas With Custom Properties

Using Locally Scoped Custom Properties

11.03.2019

By using locally scopped properties, we can easily style individual components. The title here has a class of .title, as do the h2 for each of the following sections. Because I'm using locally scoped properties to style them, I don't even need to select them, I only have to select the parent and change the value of the property. There is no need to define them in the global scope, as they aren't global properties. For example, the --button-scale has no need to be defined globally, as it's only used within my buttons. Working like this can help keep things nice and organized, yet very easy to make changes without getting into specificity wars or the need to go wild with extra classes to make minor modifications.

Made with: HTML,CSS

View Code

Using Locally Scoped Custom Properties

Alerts - Custom Variables

25.02.2019

Made with: HTML,CSS (SCSS)

View Code

Alerts - Custom Variables

Css Theme Switcher

18.02.2019

A user can click or tap on a button to reverse the colors of the site from dark text on a light background to light text on dark. There may be subtle changes too, like switching to a different highlight color to maintain sufficient contrast with the background.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderCss Theme Switcher

Custom Cursor With Css Variables

2.02.2019

Custom cursor with CSS variables and a snap animation that focuses the element you're currently hovering.

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

PlaceholderCustom Cursor With Css Variables

Expanding Search

8.11.2018

Made with: HTML,CSS (SCSS)

View Code

PlaceholderExpanding Search

Duotone Filtering With Css Variables

11.07.2018

Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters. So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color. To change the colors, adjust the colors variable in the pug code.

Made with: HTML (Pug),CSS (Stylus),JS (Babel)

View Code

PlaceholderDuotone Filtering With Css Variables

There's No Place Like Home

23.06.2018

A CSS-only house based off of the Pokemon Gameboy art featuring some JS and CSS variables to change its colours.

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

PlaceholderThere's No Place Like Home

Resizable Elements With Scoped Css Variables & Touch Support

11.03.2018

Made with: HTML (Pug),CSS (Stylus),JS (Babel)

View Code

PlaceholderResizable Elements With Scoped Css Variables & Touch Support