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
Search WWH ::

Custom Search