Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
From the author of Adding Some Style

Adding Some Style

Because the media is now native to the browser via the audio and video elements, which are of course HTML elements like any other, they can of course also be styled just like any other HTML element using standard CSS.

Adding borders, overlaying another element using a z-index, and more is possible with both the audio and video elements. In addition, you can also use some of the new CSS3 properties such as border-radius for rounded corners, box-shadow for shadows, and linear-gradients for gradient overlays (Note: You may have to use vendor-specific prefixes in some cases.)

Some of the new and exciting features of CSS3, transitions, transforms, and animations can also be applied to the audio and video elements, allowing you to create visual enhancements without the need for any fancy JavaScript. In the case of transforms, both 2D and 3D (WebKit-only browsers at the moment) are also supported, allowing you to manipulate your media via such techniques as scaling, skewing, and rotating.

I know I keep saying it, but it's a very important point: The audio and video elements are simple HTML elements and part of the Document Object Model (DOM), and can thus be treated the same as any other HTML elements.

  • + Share This
  • 🔖 Save To Your Account