Adding drop caps effects to
your paragraphs using CSS
Traditional print have long excelled the web when it comes
to layout and presentation. Open up any magazine, for example, and fancy
visual effects such as overlapping graphics, drop caps first letter, and
watermark background abound. Today, we're going to bring one of those visual
gaps between offline and online print closer together, by seeing how to use
CSS2 to add drop caps effects to your paragraphs. It won't drop any jaws,
but then again, the best and most practical effects shouldn't.
 First thing's first-
compatibility issue
Before all else, let's first discuss the dreaded
compatibility issue. Drop capping using CSS2 is supported by IE
5.5+ and Firefox/NS 6
and up.
:first-letter
pseudo element
Ok boys and gals, time to bring out our first star, the :first-letter pseudo element of CSS2.
Identical in concept and application to other pseudo elements such as
a:hover, this element allows us to bring out the first letter
of a paragraph, but enlarging and/or floating the letter to the left. Check
this out:
<style type="text/css">
.myparagraph:first-letter {
font-size:200%;
float:left;
color:blue;
}
</style>
<p
class="myparagraph">Welcome to my great little corner on the web! Enjoy
your stay...browsing around is free! Thanks, and remember, if you break
it, you buy it!<p>
Example:
Welcome to my great little corner on the web! Enjoy your stay...browsing around is free! Thanks, and remember, if you break it, you buy it! Inside the STYLE tag, we define the class "myparagraph", and
suffix it with the code ":first-letter", and whatever declarations that
follow will be applied to the first letter of that paragraph.
:first-line
pseudo element
This is a first for web pages- bringing out the first line
of a paragraph. Up until now, the effect was virtually unreplicable using
plain HTML, due to the difficulty in manually determining when one line
ends, and the second begins inside a paragraph. The
:first-line CSS element takes care of this stumbling block,
and correctly manipulates only the first line of the specified paragraph,
regardless of user screen resolution or changes to the window's dimensions.
<style type="text/css">
.myparagraph2:first-line {
font-size:110%;
text-transform: uppercase;
font-weight:bold;
}
</style>
<p
class="myparagraph2">JavaScript differs from most other programming
languages in that it is relatively easy to master, even for people who
have absolutely no programming experiences whatsoever.<p>
Example:
JavaScript differs from most other programming languages in that it is relatively easy to master, even for people who have absolutely no programming experiences whatsoever. I purposely made the above paragraph one continuous text, without any
explicit line breaks (<br>), to illustrate how the
:first-line
CSS element works- dynamically and automatically.
IE 6
pseudo elements bug
There is a major bug in IE6 with regards to pseudo elements that you
should be aware of. Specifically, the above two pseudo elements will only
work in IE6 if there is a space between the pseudo element and curly braces.
For example:
WON'T work in IE6 due to bug:
<style type="text/css">
.myparagraph2:first-line{
font-size:110%;
text-transform: uppercase;
font-weight:bold;
}
</style>
Will work in IE6:
<style type="text/css">
.myparagraph2:first-line {
font-size:110%;
text-transform: uppercase;
font-weight:bold;
}
</style>
In the second example, there is a space between "first-line" and "{".
Always do this to ensure your CSS works in IE6.
|
