Information Technology Reference
In-Depth Information
}
section .person {
margin-left:42px;
}
section ul {
width:100%;
clear:both;
}
section li {
margin:0;
padding:5px 5px 5px;
height:32px;
line-height:32px;
border-bottom:1px solid #666;
}
section li .avatar {
width:32px;
height:32px;
}
section li .avatar img {
width:32px;
height:32px;
}
section li:first-child {
border-top: 2px groove #666;
}
The
section
portion of the CSS, like the HTML document before it, is where most of the
magic happens. The first thing you should notice is another new nifty feature of CSS3
created by the Powers That Be to make our lives easier-border-radius. Now, instead of
spending hours trying to splice together images correctly to have rounded corners in
your document, or worse, relying on bloated JavaScript libraries to take care of our
border radius needs, we can pass off that work to the browser's rendering engine and
be done with it.
Here we utilize the border-radius CSS property to give our
section
container a nice
modern smartphone look and then top it off with a nice drop shadow. Afterward, we
define two sets of styles for the
.win
and
.fail
classes that we will call each round via
JavaScript as a visual indicator of whether the user chose correctly.
Figures 2-6, 2-7, and 2-8 show our game view, the view after an incorrect answer and
the view after a correct answer, respectively. Now, let's learn about the JavaScript we
need for producing the user feedback views.
