HTML and CSS Reference
In-Depth Information
Listing 7.4. index.html—Background setup
When you refresh your screen, you should see a black background with a subtle circular
gradient. Don't be alarmed that your gradient is off-center (you'll fix that when the
viewBox
is set up). If you cannot see the background gradient on your monitor, adjust
<stop offset="0%" stop-color="#333" />
to a brighter color such as
#555
.
Step 4: Add text to the screen and animate it
With a background set up, it's time for typography. Each
<text>
tag accepts x and y
coordinates for placement. You might have noticed that “Click To Play” slowly faded in
when you demonstrated the complete SVG Aliens game. You perform fades by inserting
an
<animate>
tag inside text tags. You create animation by targeting the CSS (
at-
tributeType
), declaring a specific style attribute (
attributeName
), start (
from
)
and end (
to
) values, and the duration (
dur
) in seconds. Nest an
<animate>
tag inside
most SVG elements, and you'll be able to create animation without the need for JavaScript
