PHONE

Customer Inquiries

1001 Mark Boulevard St.

New York, NY, US.

}

Mon - Sat 8.00 - 18.00

Sunday CLOSED

Sales department

+01 2345 6789

Cool Drop Caps With CSS

Here’s some really cool block style drop caps that can give your site that ‘legal’ look or , if the font is right, a gothic look. Even great for magazine style blogs! This is pretty versatile and basically drops right into your current scheme. Here’s how it works:

The CSS

The CSS itself is very straightforward. It lays out a class to be used with the <span> tag which would surround the first letter of the paragraph you wish to make into a drop cap. Like this:

And the basic HTML use:

Output

That will output the following:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Vivamus blandit. Suspendisse potenti. Nullam vulputate, enim sed mattis aliquet, tortor augue pretium tortor, id porta massa urna id ante. Praesent urna magna, posuere a, facilisis egestas, lobortis a, nibh. Phasellus nec neque. Maecenas tincidunt, dui ut vehicula vehicula, nisi mauris hendrerit ligula, id facilisis magna elit sed erat.

Previous

Next

Pin It on Pinterest

Share This