Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 170

#listview-in {
width: 650px;
height: 300px;
border: solid 2px #111;
}
#semantic-zoom-container {
width: 600px;
height: 350px;
border-top: solid 2px #31cfd4;
border-bottom: solid 2px #31cfd4;
}
Everything is ready for testing the application.
Using gradients for the background
You may have noticed that all colors used so far—especially background colors—are solid colors.
Windows 8 makes a strong point of simplicity and solid colors are part of the strategy. However, that
doesn't mean you can't use gradients.
A Windows Store application fully supports CSS3, and CSS3 does have a section about gradients.
So here's an example of a nice (radial) gradient to make the listview background even nicer.
#semantic-zoom-container {
...
background: -ms-radial-gradient(center, ellipse cover, #c5deea 0%,#8abbd7
31%,#066dab 100%);
}
The syntax is fairly simple and based on the pair color/percentage. In particular, the gradient starts
with #c5deea, blends towards #8abbd7, and reaches it around 31 percent of coverage; the gradient
ends with color #066dab. If you like linear gradients, you can use the following syntax:
background: -ms-linear-gradient(left, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8
100%);
To do a live experiment with gradients, you can pay a visit to http://www.colorzilla.com. And once
there, you can pick up one of the predefined gradients or create and preview your own ones.
Everything is now ready and the results of the exercise are ready to be unveiled, as shown in
Figure 7-12.