CSS – drop cap effect

CSS drop cap effect can be achieved by making first letter of bigger size (keeping line height not so large) and the applying float:left on it. In addition we can capitalize it.

.box {width: 200px;}
div.box::first-letter {
  font-size: 200%;
  font-weight: bold;
  text-transform: uppercase;
  float: left;

<div class="box">
lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments