net - UK (2020-02)

PROJECTS
CSS

CSS

The main graphic in this page is an SVG image and,

as this is just an XML file, the graphic elements inside

of this can be manipulated through CSS. A tint will

be adjusted to change the feel of the time and the sky

will be transformed through the use of a background

gradient. The added advantage of an SVG is that, as it

is a vector image, it scales perfectly to any screen size.

To get started with this project, open the start

folder in your code IDE and you will see that there is

some basic HTML structure in the index.html page.

Let’s move into the design.css file and incorporate

the background gradients that will be added

depending on what time it is.

BUILD A TIME-BASED

ANIMATED LOGIN SCREEN

Pdun#Vkxl·herwwrp harnesses the power of CSS to access graphics inside

an SVG scene and create a unique mood animation based on the time

Grabbing your users’ attention is essential if

you want to make your page stand out and, if

it’s done correctly, it’s something that will actually

enhance the users’ experience. This in turn will build

positivity towards your brand.

In this tutorial, we are going to explore creating

an interactive login screen that takes the user’s time

of day and creates a unique page design. The user’s

attention will be focused in this case by changing the

mood of the scene based the time of day. The sun or

moon will be animated into the sky depending on

the current time; these subtle changes go a long way

in telling the user their experience matters.

ABOUT THE AUTHOR

MARK

SHUFFLEBOTTOM

w: webspaceinvader.com

t: @webspaceinvader

job: Professor interaction

design

areas of expertise:

HTML, CSS, JavaScript

View source

files here!

All the files you need for

this tutorial can be found at

https://netm.ag/380dap2