fun with fonts
Cascading Style Sheets provides a mechanism for doing very fancy effects with fonts. When used in association with positioning rules it is possible to create designs that previously could only have been accomplished with images.
The fun with fonts heading at the top of this document is a classic example of
what can be achieved and you will pleased to learn it is very simple. I started by writing
the heading as a normal h1 heading. Then I substituted the spaces for
non-breaking spaces. Next, I gave each individual word a span element and assigned
a separate class attribute for each one. Finally, I applied style rules to each
class. Here are the rules for the word fonts:
span.fonts { font-family: 'Comic Sans MS', sans-serif;
font-size: 5em; background: transparent none; color: blue; position: relative;
left: -1.0em; top: -0.4em; }
Of crucial importance here is the style rule position: relative, because it allows
me to shift the elements around. left: -1.0em moves the word 1em to the left of where
it would normally be.
stacking text
As you can see, stacking text on to each other is easy. The stacking order is decided by
the order in which the text appears in the markup. That stacking order can be altered using the
z-index property. By applying a lower z-index value to the word text, I can
ensure it appears below the word stacking:
stacking text
You have to be a little careful with relative positioning because the element being moved it shifted with respect to its containing block. If the element moves to far in any direction, the browser will be forced to compensate with a horizontal scrollbar. It is important to take into account the fact that the user may specify a large font size, either within a user style sheet or with a browser tool.
information resource
There are many other font effects and you can find their specifications in the Fonts section of the World Wide Web Consortium's CSS Level 2 specifications. Thank you for reading.
|
© Simon Jessey, 2002