Skip to content

Instantly share code, notes, and snippets.

@wooorm
Last active December 24, 2015 04:29
Show Gist options
  • Save wooorm/6744406 to your computer and use it in GitHub Desktop.
Save wooorm/6744406 to your computer and use it in GitHub Desktop.
Drop Cap using CSS Shapes Module.
p { margin: 0; }
.dropcap::first-letter {
float: left;
font-size: 10rem;
font-family: "Hoefler Text";
font-style: italic;
/* Note, only supported in Safari 7 (on iOS, not on Mavericks) and the latest versions of Chrome Canary (behind the flag “Enable experimental Web Platform features”) */
-webkit-shape-outside: polygon(0 0, 80% 0%, 95% 12.5%, 103.5% 25%, 100.5% 37.5%, 85% 50%, 70% 62.5%, 25% 70%, 145% 75%, 160% 87.5%, 150% 93.75%, 110% 100%, 0 100.1%, 0 0);
shape-outside: polygon(0 0, 80% 0%, 95% 12.5%, 103.5% 25%, 100.5% 37.5%, 85% 50%, 70% 62.5%, 25% 70%, 145% 75%, 160% 87.5%, 150% 93.75%, 110% 100%, 0 100.1%, 0 0);
position: relative;
color: hsl(35, 97%, 54%);
}
<p class="dropcap">Quisque ut felis sem. Quisque porttitor ante nulla, non pretium ligula ultricies sit amet. Donec commodo massa a felis fermentum, at porta nunc faucibus. Vestibulum sit amet diam aliquam, placerat dui ac, volutpat orci.</p>
<p>Integer euismod porttitor orci id ultrices. Donec fringilla augue eget nunc euismod, ac fermentum eros rhoncus. Aenean interdum pharetra quam, non mattis augue porta nec. Proin eu velit vel est gravida ullamcorper. Sed nec sem eu velit sollicitudin tincidunt non sit amet eros. Donec ut mauris cursus, rhoncus odio ac, vestibulum arcu. Morbi in pellentesque erat, in porttitor nibh. Pellentesque in vehicula elit. Sed tincidunt facilisis arcu, ut lobortis metus ultricies ut. Etiam accumsan feugiat nibh, at suscipit tellus porta id. Donec dapibus suscipit purus auctor pellentesque. Aenean id augue at neque scelerisque sagittis. In sed odio dapibus, ultrices justo quis, convallis tortor. Etiam faucibus pellentesque facilisis. Vestibulum malesuada elementum urna.</p>
<p>Mauris cursus adipiscing dui, ac varius turpis mattis vel. Vestibulum eleifend ornare eleifend. Mauris gravida molestie lectus, ac pharetra mi porta in. Praesent imperdiet nunc dictum nunc porta imperdiet. Maecenas sagittis felis tincidunt, dignissim mauris ac, auctor quam. Integer eget enim leo. Donec dapibus tincidunt arcu, sed ullamcorper sem consectetur a. Vestibulum hendrerit, quam sit amet tristique placerat, sapien risus lacinia dui, ut condimentum eros sem vitae odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent pharetra sem viverra semper facilisis. Duis sit amet gravida nulla, quis blandit neque.</p>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment