Magnitude Site ReviewI was checking out this site design review of Magnitude by CSS Drive and thinking how strangly they created the drop cap effect in their pages. They make use of that effect in almost all the pages and every single time they added an image for the very drop cap letter.
Man, that’s just not right.

I would expect a bit more from web+interactive company like theirs to show more professionalism in their site. After all the first impression sometime counts and in this case the company portfolio site would determine the reputation and skills behind it. Anyway I like the design, very artistic with interesting decay looking text and I like the left menu. The only problem I see is Drop Cap characters.

If I have to do drop cap I would rather use css for that. I’ve tested it and it’s really easy. You need only 3 lines or so.
Well for my own note as well as for you (if you wanna know) the CSS code for Drop Cap effect and implementation as shown below.

#dropcap
{
	float: left;
        font-size:300%;
        font-weight: bold;
        line-height:50px;
}

<p><span id="dropcap">W</span>orem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

There see short and sweet. No need to create image characters everytime you wanna make that effect. Ok you just have to adjust font size and line height according to your need.
That’s it, I gotta sleep.
Cheers.

No related posts.