Fancy Drop Cap CSS

by ashleycam3ron

HTML

<script src="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Playfair+Display&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<h1>
A Fancy Drop Cap Letter
</h1>
<p>Bacon ipsum dolor amet biltong jowl short ribs, pork chop ground round prosciutto cow frankfurter bresaola corned beef filet mignon rump spare ribs burgdoggen. Rump biltong pork chop short loin, pork loin drumstick bacon andouille shankle meatball cupim.
  Kevin rump ball tip t-bone, picanha ham hock capicola leberkas alcatra beef ribs prosciutto frankfurter hamburger.</p>

<p>Shank pancetta doner brisket. Pork belly picanha biltong frankfurter boudin turducken jerky tenderloin bacon shoulder swine venison turkey sirloin brisket. Kevin rump ball tip t-bone, picanha ham hock capicola leberkas alcatra beef ribs prosciutto frankfurter
  hamburger.
</p>
<img src="http://ashley-cameron.com/clients/tut/drop-cap1.png" />

CSS

body {
  font-size: 14.5px;
  color: #777;
  line-height: 1.25em;
  width:70%;
  margin:12% 15%;
  background: white;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #a4bb65;
  text-align: center
}

h1:after {
  content: "";
  width: 40px;
  height: 1px;
  background: #a4bb65;
  display: block;
  margin: 25px auto 0;
}

img {
  margin: 0 auto;
  display: block;
}

p:first-of-type::first-letter {
  font-family: sans-serif;
  font-weight: 200;
  font-size: 67px;
  line-height: 53px;
  float: left;
  color: #d4cb47;
  padding: 20px 12px 34px 24px;
  margin: -20px auto -27px -27px;
  background: url(http://ashley-cameron.com/clients/tut/drop-cap.png) no-repeat;
  text-shadow: 
    -1px -1px 0 #fff, 
    1px -1px 0 #fff, 
    -1px 1px 0 #fff, 
    1px 1px 0 #fff, 
    3px 3px 0 #c6cdba;
}