net - UK (2020-02)

PROJECTS
CSS

GET THE LOWDOWN

ON CSS GRADIENTS

RESOURCES

CSS gradients have been around for some time now but it

can be confusing to create them and there is always the

problem of whether to still include browser prefixes or not. That

really comes down to how much backwards compatibility you

need, so checking your sites analytics will give you that

information. Here are some useful resources that will help you get

the most out of gradients.

CSS Gradient

https://cssgradient.io/

The easiest way to create any gradient is to do so visually. This

online gradient creator will help you put the colour stops in and

then specify the direction for a linear gradient or whether you want

to have a radial gradient. Once done, the CSS can be copied and

pasted right into your own code.

Copy CSS to Clipboard

If you use Adobe XD as your design software then there is a very

handy plugin available called Copy CSS to Clipboard. Once installed,

just go to the Plugins menu with the element selected. Choose

Copy CSS to Clipboard and then you can paste the gradient into

your CSS code. You’ll also get width and height information but you

can just delete that.

MDN CSS Gradients

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/

Using_CSS_gradients

For those of you who are CSS purists, then of course you should

refer to a guide such as the Mozilla Developer Network’s resource

on CSS gradients. This will enable you to code your own gradients

from scratch. You’ll never be at the mercy of any software and, of

course, you can wow your friends with your CSS wonders.

Switch over to the main.js file now. A number

of global variables need to be declared here. These

variables grab references to elements from the

document – you can think of it as the screen display.

These elements are those that need to be updated

with CSS classes or have some movement added to

them. The most important task here is of course to

grab the time from the user’s computer. The hour of

the day is stored in the variable hourNow.

let today = new Date();

let hourNow = today.getHours();

let svg = document.getElementById(“svg”);

let sun = document.getElementById(“sun”);

let welcome = document.getElementById(“welcome”);

let timeslot = “”, bd = document.body;

Once this time is known, a welcome message is

added based on what part of the day it happens to

be. If you uncomment the hourNow variable you can

change the time from there to test different times

by changing the number; this just overrides the time

from the user’s computer and is useful for checking

the appearance of morning, noon or night without

having to wait! Just remember to comment this out

again when you want it to read the user’s actual time.

//hourNow = 7;

if (hourNow >= 5 && hourNow < 12) welcome.innerHTML =

“Good Morning, welcome to”;

if (hourNow >= 12 && hourNow < 18) welcome.innerHTML

= “Good Afternoon, welcome to”;

if (hourNow >= 18 || hourNow < 5) welcome.innerHTML =

“Good Evening, welcome to”;

The next part of this is to detect whether this is

daytime, sunrise, sunset or night. This is completed in

the following if statements. The gradient background

is changed based on this; daytime will use the default,

sunrise and sunset will use the same one as each

other and night will change to a darker gradient.

if (hourNow >= 6 && hourNow < 9) {

timeslot = “sunrise”;

bd.classList.remove(“day-back”);

ģWkh#vxq#lv#fkdqjhg#wr#d#

prrq#e|#vlpso|#

fkdqjlqj#wkh#frorxu#wr#d#

oljkw#eoxhĤ