I have already written about how to target & style the first letter with CSS only, and here are few design ideas to style drop caps. In the CSS, the pseudo element :first-letter is used. You can replace that with custom span element on the first letter. That ewould give you some additional style options as you an apply :before & :after to that span element (you can’t do that on :first-letter), but you’ll need to apply span either by hand or by javascript snippet. Mind that wrapping a first letter into can be accessibility fail.

If you shuffle thru some historic books, you’ll notice the real art of drop caps and initials, where the first letter was often a complex illustration with patterns and lines and sometimes took the whole page. This might not work for every design :)

Simple Drop Cap

Start with a simple drop cap, where the initial span over two or three rows, change the color to and font-weight to match your design. This is something on the “safe side” and works well with all the letters. How to adjust the font size highly depends on your chosen font used and line spacing – there is no real (precise) formula here, but your eyes. Mind that Chrome and Firefox can render line-height a bit differently, especially if you’re not using css-reset.

simple drop cap design

Subset Drop Cap with Different Font

Fancy more illustrative drop cap? Find a font in handwritten style and subset the :first-letter with different font. Don’t forget to declare custom font first. Change the background color of the initial, change the corners or add borders.

drop cap design

p:first-letter {
  font-family: "Fleur De Leah";
}

Style the Space around the Initial

Add border, box-shadow, color … Go further and style :before and :after pseudo elements of paragraph. Mind, especially the width of the Initial can vary a lot (depending on the font), so make sure the design works well for most of letters. I added a different color on pseudo element, while the top & right “border” are basically a box-shadow, so “design” will stretch with the letter size.

drop cap creative design

Note: :before element with :first-letter can nullify each other. Especially Firefox seems to prefer to use :before CSS and ignore :fist-letter if both are used. Use :after if you can choose and check how drop cap is rendered in different browsers.

Use Image as Background for Drop Cap

Yes, you can apply the background-image to :first-letter. Just make sure there is enough contrast between the letter an the background. Adjust the background-size to desired size. Furthermore, you can add borders or double/multiple borders using box-shadow trick.

drop cap with background image

p:first-letter {
  background-image: url('/background.jpg');
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #073938;
}

Image “Inside” the Letter Shape

What about an image or pattern “inside” the drop cap? Yes, an image in the shape of the letter? Yes, that’s possible. We can go a bit retro and use some floral patterns to fill in the letter. Use background-clip: text and adjust the text color: transparent so that image is visible thru the shape of the letter/text.

Floral pattern background
Floral pattern to be used as background image for Drop Cap, source: freepik.com

Drop cap with background image in letter shape

Be creative with the background; I added “inverted rounded corners” to the :after pseudo element using CSS-gradient.

 
p:first-letter {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: url('/background.jpg');
} 

Drop caps in HTML, CSS in Codepen

All five creative drop caps CSS styles in HTML & CSS as Codepen.

See the Pen Creative Drop Caps by Ana (@dinozzaver) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *