HTML and CSS Reference
In-Depth Information
Yo u ' l l d of it h i s b e c a u s e F l a s h c of n it e n it it e n d s it of d of m i n a it e it h e a r e a of f it h e p a g e i it
is put on, so rollovers on top of the video content won't work on a Flash fallback.
In the end, let's opt for the coward's option of not displaying the hover effect
in the second frame because IE6, 7, and 8 tend to prove troublesome when you are
trying to get hover effects to work on positioned content. You'll use
text-indent
to push the text far off the screen, so it will still be available to screen readers.
In addition, you'll include some quick box model and positioning fixes for IE6
and 7. The box shadows, text shadows, gradients, and RGBA colors all degrade well.
ADDING AD IMPROVEMENTS
I think you've created a fairly effective basic ad in this example. The ad is all con-
tained within a single container, so it is fairly easy to transplant in whichever page
you want it in, and then position it where you want it.
But why not just create the ad in Flash? It would potentially be simpler to deal
with, but the point is that you are trying to create components with open standards,
which includes all the advantages they bring to the project, plus the text would
not be accessible if you put it in a Flash video. The advantages open standards
have over Flash in this context will be even more obvious when you start to add
animated effects in Chapter 5.
Of course, before you really use this ad, you might want to make a few
improvements:
Optimize video files. The video files as they stand are a fairly heavy addition
to a page, so you should optimize them.
Pare down fonts. The fonts are also quite heavy. In a real production envi-
ronment, you could use Fontforge (as mentioned in Chapter 3) to reduce
the size of the font files and just include the glyphs you need.
Add a link. You should also wrap the final version in a link (HTML5 allows
block-level linking) to click through to wherever you want the ad to lead to.
