HTML and CSS Reference
In-Depth Information
/* add gradient background */
background-image: linear-gradient(top, #fff, #fcc);
background-image: -moz-linear-gradient(top, #fff, #fcc);
background-image: -webkit-linear-gradient(top, #fff, #fcc);
background-image: -o-linear-gradient(top, #fff, #fcc);
background-image: -ms-linear-gradient(top, #fff, #fcc);
}
/* shadows */
#videoobj, #start, #stop, #pause {
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
Lastly, we'll provide the proper spacing for the controls and
progress
element containers, in-
cluding turning their display off by default:
#feedback
{
display: none;
margin: 10px 30px;
}
#controls
{
display: none;
margin: 5px 30px;
}
Figure 17
shows the newly designed and styled video element and custom controls, playing in
Chrome. The progress element also displays in Opera and Firefox 6 and up. Note the progress
showing in the
progress
element. If we load the page in Firefox 5 and Safari 5, as well as the
current Webkit Nightly (at the time this was written) and IE9/10, we'd see text instead.
