CSS ‘Media’ Boxes

Goto /examples/css/
..

Just wanted something smooth to look at in relation to video/image/audio links. It doesn't use images for the borders for good reason, so you'll find browsers that don't implement border-radius: wont look as sexy.

Inspired by an image on this page, http://blogs.sun.com/dannycoward/entry/javaone_2007_java_se_javafx, the image Sun's technical keynote presentation

How to use it:

  1. Download mediaboxes.css
  2. Include the file in the page(s), via a <link rel="stylesheet" href="mediaboxes.css" media="screen" title="Default" type="text/css" />, or copy & paste the code into the bottom of your <style> block.
  3. View the source to get the hints, and fix up your source.

Example

I wasn't too happy happen with the previous version, I wanted the rounded corners to crop the image, but it isn't doable unless you use a background image. And here's that version, see how close it is to the image at the top of the page?

Haiku presentation at Google.
Ogg Theora+Vorbis, 59m 53s

Haiku presentation at Numerica07.
Ogg Theora+Vorbis, 42m 17s

LugRadio episode featuring a mention of Haiku (OS).
Ogg Vorbis, 123m 36s

Highlight the above, Google, Numerica & LUGRadio

Yay, just completed it, isn't it awesome!

The Solution

Sun's technical keynote presentation
Intro & Technical Deep Dive, 8th May 2007
MP4, 30m 19s