Create Drop Caps Using CSS3

Datetime:2016-08-23 03:05:29          Topic: CSS3           Share

A drop cap is the first letter of a paragraph or a text block that is larger and usually styled differently from the rest of the letters. This can be done a number of different ways, including inserting <span> tags into your HTML, but one effective and quick way to do it is by using CSS. With the :first-of-type (use this if you want a drop cap on the first paragraph only) and the ::first-letter pseudo selectors, we can style the first letters of the paragraphs without having to alter our HTML.

Here’s what the CSS should look like:

p:first-of-type::first-letter{
color: #b40049;
font-size: 28px;
font-weight: bold;
margin-right: 3px;
margin-bottom: 0px;
}

And the final product will look something like this:

If you want the top of the drop cap to be vertically aligned with the rest of the paragraph, you can add a float: left to the above code and then play around with the spacing. Using the ::first-letter selector, any type of styling including borders, colors, font-family changes, and font-style changes can be applied to the drop cap.





About List