HTML and CSS Reference
In-Depth Information
Most of the content is absolutely positioned so the layers stack on top of one
another, and most of the containers are set to 720 x 300 px, the same dimensions
as the outer container, to keep everything inside the ad working well. Most of the
code should be pretty simple to understand for anyone with previous CSS experi-
ence, so I'll just explain the CSS3 code. You can find my code in the poster folder
in the code download.
ADDING THE CSS3 SPARKLE
Let's walk through the different layers of this example in turn so it'll make more
sense. You first have the video, and the
video-frame
div is positioned on top of
it. This “superfluous” div is annoying to have to include, but it is necessary at the
moment because currently
border-image
doesn't work correctly across all brows-
ers. Recall that in all browsers except Chrome the middle slice is wrongly included,
and you can't get rid of it. If you could, then you could add the ripped edges using
border-image,
but at present you can't. So instead you'll add the ripped edges on
this div using multiple background images:
#video-frame {
width: 720px;
height: 300px;
: ) p t ,
p
url(right-edge.png) top right repeat-y;
}
This is a rather useful technique in many ways: Imagine if you had lots of ele-
ments, such as headers or articles, and you wanted them to have a background
image at either end and have a flexible width and height. This code is all you'd need.
Next, you'll set a uniform black text shadow on all text, apart from the interest-
ing flaming effect I've put on the word “hell”: This is suitable for increasing the
latent cheese factor to be appropriate for the average heavy metal band. This can
be done like so—add this now to your text:
