Thursday, September 04, 2014

Basic CSS Drop Cap

Alorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare velit sed libero tristique, ut pellentesque quam porta. Proin iaculis posuere aliquam. Aenean semper vulputate nisl et ornare. In adipiscing pretium ante vestibulum faucibus. Cras molestie, urna vel dignissim sollicitudin, mauris nisl condimentum leo, sit amet hendrerit nisi magna ut lorem. Sed ac porta augue. Sed feugiat odio at auctor venenatis. Donec eu scelerisque neque. Nulla facilisi.

The styling of this dropcap which I came across in an online magazine article is very similar to dropcaps we have done before. The basic approach is: Use a span to mark it up, increase the font-size, and float the letter to the left. You can change its color (#DB0404) and choose any font you like. The font for this example is Typekit "ltc-bodoni-175". If you want to place the dropcap letter on a circle or a square, please see this post. Below, same dropcap, larger and positioned differently:

Alorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare velit sed libero tristique, ut pellentesque quam porta. Proin iaculis posuere aliquam. Aenean semper vulputate nisl et ornare. In adipiscing pretium ante vestibulum faucibus. Cras molestie, urna vel dignissim sollicitudin, mauris nisl condimentum leo, sit amet hendrerit nisi magna ut lorem. Sed ac porta augue. Sed feugiat odio at auctor venenatis. Donec eu scelerisque neque. Nulla facilisi.

A neat site for different dropcap ideas.

2 comments:

Anonymous said...

You can now use :first-letter for the same effect.

Stuparu Gabriel said...

ss

Post a Comment