CSS
Scalable vector graphics (SVGs) can be created in any vector
drawing package. For this tutorial, the landscape scene was
created in Adobe Illustrator. In this case all of the graphics are just
placed on one layer. Any graphic element that is named in
Illustrator gets that name as an ID when it is exported as an SVG
image. If it has an ID, it can be accessed through code, which
means it can be manipulated in any way, giving the designer the
power to modify the image at runtime in the browser. As all the
content here is on one layer, open the Layers panel and click the
arrow next to Layer 1. This shows the individual graphics on that
layer; find the layer you need to name and assign a unique name.
To export as an SVG, go to File > Save As. Choose SVG instead
of the default AI, then choose the location and save. It’s useful
to save with the Responsive option as it automatically fills the
container holding it on the web page and will resize without you
having to write any additional code for the image. You can also
take a preview at the SVG code if you are trying to get the option
that gives you the smallest file size.CREATE YOUR
OWN SVG IMAGES
IN-DEPTH.day-back {
background: linear-gradient(0deg, rgb(174, 229, 225)
34%, rgb(111, 174, 219) 100%);
}
.rise-back {
background: linear-gradient(0deg, rgba(247, 222, 114, 1)
45%, rgba(255, 169, 168, 1) 60%, rgba(78, 147, 146, 1) 80%,
rgba(25, 61, 87, 1) 100%);
}
.night-back {
background: linear-gradient(0deg, rgba(15, 72, 92, 1) 0%,
rgba(28, 148, 159, 1) 56%, rgba(24, 57, 86, 1) 100%);
}
These three classes all have a time associated with
them, so the correct gradient can be dropped onto
the body element to create the background. The
day-back class is added by default, so if it happens to be
daytime – the time most users will use the service –
there won’t need to be any change to the background.
Next is the CSS for the sun, which is just a square
div that is given 50% round corners. This turns it into
a circle – just add a background colour and you have
an instant sun! There’s a three-second transition on
this so it can move into place with an arc motion;
this helps it look like the sun or moon moves into
the sky based on the time. Notice the transform-origin
is offset to the right so it rotates from a point outside
the sun. This creates the arc movement to rise into
the sky.
#sun {
height: 100px; width: 100px;
background-color: #f4f2d5;
border-radius: 50%;
position: absolute;
top: 20%; left: 50%;
transform-origin: 0% 400px;
transition: transform 3s ease, background 3s ease;
transform: rotate(-70deg);
}
“The main graphic in this
page is an SVG image and, as
wklv#lv#mxvw#dq#[PO#Ľoh/#wkh#
judsklf#hohphqwv#lqvlgh#ri#
wklv#fdq#eh#pdqlsxodwhg#
wkurxjk#FVVĤ