A minimal 404 page built with Sass ✌️
The color palettes
I had two reasons for creating two different color palettes triggered by a page load:
1) The hype with Sass
Since I am a Sass-beginner I just wanted try it out in a smaller project first. I wanted understand the structure and logic using this new Sass(y) way of writing CSS. It turned out that Sass really was useful when wanting to add or change color palettes. Which was perfect my 404-page.
2) The element of surprise
Who doesn’t like small and thoughtful surprises when they visit a website!? Hopefully a user/visitor doesn’t come across too many 404 pages, in their browsing experience, but if they do, then it should be pretty and colorful 😉 and maybe changing color on page load?
A few weeks ago I found this awesome web page, uigradients with all kinds of different gradients. Which inspired me to use gradients in my next project myself. I used one warm gradient and a cold one, seen below.
$gradientWarm:linear-gradient(to left, #f5abab, #f170b7);
$gradientCold:linear-gradient(to right, #82a8e0, #da6bbd);
The animated buttons
Now the buttons were a bit tricky. Normally I would used a background-color to set the color when hovering, but this time around I had to define my gradient with a background-image instead, in order for it to work. Exactly how to create this smooth animation hover, only in CSS, can be found here.
Is what I like to call this cool feature. Basically you use the ‘shape-outside’ rule + add a margin for text to align along a specific shape, in my case a circle. And it worked beautifully! ✨ At least in Chrome and Safari. In Firefox it just aligns regularly, as a squared shape. However I am very happy with the results in Chrome and Safari, and can already see this rule being used in the future, when supported in more browsers, creating more dynamic web designs. 👍
shape-outside: circle() margin-box;
Okay, so after finishing my first project in Sass, what do I think? I 😍 it. In fact, now when writing ‘regular’ CSS, I feel as if I am doing it wrong, and keep thinking of how I could have written it better with Sass.😊