HTML and CSS Reference
In-Depth Information
CSS inheritance to tweak color, display, and more. In short, groups give you more control
and require less maintenance and markup. The following snippet shows CSS rules you've
already added to style.css, so you don't need to add them. The
.open
and
.closed
se-
lectors will toggle between the two paths for each UFO. The following snippet will also
paint UFOs with different colors depending on a class of
.a
,
.b
, or
.c
.
.
closed
.
anim1
, .
open
.
anim2
{
display
: none }
.
open
.
anim1
, .
closed
.
anim2
{
display
: inherit }
.
ufo
.
a
{
fill
: #8C19FF }
.
ufo
.
b
{
fill
: #1EE861 }
.
ufo
.
c
{
fill:
#FFE14D }
We've prebuilt the paths for you in the next listing so you don't have to go through all the
work required to create them.
Listing 7.21. game.js—UFO paths
