CSS Drop Caps
Example of CSS Drop Caps
Learn how to add CSS Drop Caps to your Web pages.First-Letter
This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut hendrerit, pede vel tristique dignissim, dui augue dapibus neque, vitae pellentesque neque leo a tortor. Nullam tempor, nisi ac mollis scelerisque, odio orci volutpat mi, vel tincidunt ligula erat at enim. Nunc at erat suscipit enim porta imperdiet. Maecenas at ipsum non justo vehicula euismod. Ut rutrum mollis tortor. Nullam augue ante, semper quis, malesuada vel, mollis nec, odio. Etiam pulvinar lacus ac sem fringilla feugiat. Aliquam sollicitudin pretium justo. Praesent in arcu non dolor aliquam blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed lobortis purus vel nunc dictum condimentum. Vestibulum odio nibh, facilisis ut, dignissim quis, sagittis at, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Fake It In Older Browsers
This paragraph has a drop-cap on the first character that should be visible to browsers like Internet Explorer 4 and 5. It will work in Netscape 4 as well, but you need to play around with the width of your letter to find the right size. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut hendrerit, pede vel tristique dignissim, dui augue dapibus neque, vitae pellentesque neque leo a tortor. Nullam tempor, nisi ac mollis scelerisque, odio orci volutpat mi, vel tincidunt ligula erat at enim. Nunc at erat suscipit enim porta imperdiet. Maecenas at ipsum non justo vehicula euismod. Ut rutrum mollis tortor. Nullam augue ante, semper quis, malesuada vel, mollis nec, odio. Etiam pulvinar lacus ac sem fringilla feugiat. Aliquam sollicitudin pretium justo. Praesent in arcu non dolor aliquam blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed lobortis purus vel nunc dictum condimentum. Vestibulum odio nibh, facilisis ut, dignissim quis, sagittis at, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
