HTML and CSS Reference
In-Depth Information
Try it out
Refresh your browser to reveal a black screen with one line of text. Don't be alarmed that
your mouse has disappeared. We had you replace the default mouse cursor with a blank im-
age called cursor.png from the assets you downloaded earlier (placed in your root folder).
HTML5 Pointer Lock API and CSS coloring alternative
Normally when you want to collect movement data and hide the cursor, you lock the mouse
in a specific position. Although browsers don't allow you to toggle OS movement controls
for security reasons, there's an HTML5 API called Pointer Lock that allows you to collect
mouse data with movement locked. See
http://www.w3.org/TR/pointerlock/
for more in-
formation from the latest W3C draft.
An alternative to declaring CSS fills would be adding the property
fill="#453"
directly
to XML tags. Professional frontend developers consider inline styles bad practice with ap-
plications, because repeating properties on HTML elements can quickly make files an un-
maintainable mess.
7.2.2. Programming simple shapes and text
Those who actively use CSS3 are probably guessing that CSS or JavaScript determines
SVG Alien's animation, gradients, and other complex features. Thankfully, SVG has an
<animate>
tag and built-in gradient support. With these features in mind, let's create
your Game Start and Game Over screens.
Step 3: Add shapes for the Game Start screen
The start screen in
figure 7.4
requires a game title, information about the point system, and
a message that clicking activates game play. We'll create this start screen first.
