Skip to content

Instantly share code, notes, and snippets.

@AlanSimpsonMe
Created February 20, 2018 19:07
Show Gist options
  • Save AlanSimpsonMe/c38dff36adbef73fdf4b36e8c7dde438 to your computer and use it in GitHub Desktop.
Save AlanSimpsonMe/c38dff36adbef73fdf4b36e8c7dde438 to your computer and use it in GitHub Desktop.
Super Simple CSS Drop Cap
<!DOCTYPE html>
<html>
<head>
<title>Drop Cap Example</title>
<!-- Feel free to use however you wish http://AlanSimpson.me -->
<style>
/* This width is just to make the paragraphs narrow, not required in real life */
p {
width: 400px;
}
/* This applies only to the first paragraph on the page, not all paragraphs.
If you want every paragraph to start with a drop cap, remove :first-of-type
*/
p:first-of-type:first-letter {
float: left;
/* Choose any color you want */
color: #f09;
/* This is about right for 3-lines but you can experiment */
font-size: 42pt;
line-height: 33pt;
padding: 2px 6px 0 2px;
/* Optional drop shadow behind large letter */
text-shadow: 2px 3px 4px rgba(128,128,128, 0.8);
}
</style>
</head>
<body>
<p>Powder candy soufflé soufflé muffin jelly apple pie. Toffee tart tiramisu gummi bears soufflé soufflé tootsie roll pastry. Cake oat cake lemon drops. Brownie chocolate bar liquorice marzipan pie gummi bears. Candy canes wafer toffee lemon drops.</p>
<p>Candy canes bear claw chupa chups topping tart lollipop tart chocolate bar. Halvah tart topping cotton candy brownie. Sweet roll powder gummies gummies candy canes tootsie roll. Carrot cake cotton candy macaroon dragée bear claw.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment