Skip to content

Instantly share code, notes, and snippets.

@nicohaemhouts
Created February 26, 2015 18:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nicohaemhouts/9f13663e5d991748f6a1 to your computer and use it in GitHub Desktop.
Save nicohaemhouts/9f13663e5d991748f6a1 to your computer and use it in GitHub Desktop.
Dropcap

Dropcap

Show the first letter of the first paragraph larger and in a different color than the rest of the text, using the ::first-letter selector.

A Pen by Nico Haemhouts on CodePen.

License.

<body>
<p>But not a bit daunted, Queequeg steered us manfully; now sheering off from this monster directly across our route in advance; now edging away from that, whose colossal flukes were suspended overhead, while all the time, Starbuck stood up in the bows, lance in hand, pricking out of our way whatever whales he could reach by short darts, for there was no time to make long ones. Nor were the oarsmen quite idle, though their wonted duty was now altogether dispensed with. They chiefly attended to the shouting part of the business. "Out of the way, Commodore!" cried one, to a great dromedary that of a sudden rose bodily to the surface, and for an instant threatened to swamp us. "Hard down with your tail, there!" cried a second to another, which, close to our gunwale, seemed calmly cooling himself with his own fan-like extremity.</p>
<p>All whaleboats carry certain curious contrivances, originally invented by the Nantucket Indians, called druggs. Two thick squares of wood of equal size are stoutly clenched together, so that they cross each other's grain at right angles; a line of considerable length is then attached to the middle of this block, and the other end of the line being looped, it can in a moment be fastened to a harpoon. It is chiefly among gallied whales that this drugg is used. For then, more whales are close round you than you can possibly chase at one time. But sperm whales are not every day encountered; while you may, then, you must kill all you can. And if you cannot kill them all at once, you must wing them, so that they can be afterwards killed at your leisure. Hence it is, that at times like these the drugg, comes into requisition. Our boat was furnished with three of them. The first and second were successfully darted, and we saw the whales staggeringly running off, fettered by the enormous sidelong resistance of the towing drugg. They were cramped like malefactors with the chain and ball. But upon flinging the third, in the act of tossing overboard the clumsy wooden block, it caught under one of the seats of the boat, and in an instant tore it out and carried it away, dropping the oarsman in the boat's bottom as the seat slid from under him. On both sides the sea came in at the wounded planks, but we stuffed two or three drawers and shirts in, and so stopped the leaks for the time.</p>
</body>
body {
margin: 4em;
}
p {
font-size: 1.5em;
line-height: 1.5em;
font-family: Georgia
}
p:first-child:first-letter {
float: left;
color: #903;
font-size: 5em;
line-height: 0.85em;
padding-right: 0.1em;
}
@dnlsrl
Copy link

dnlsrl commented Jul 19, 2015

Hi, thanks for this gist!

How can I change the code so the style won't be applied to paragraphs inside <blockquote></blockquote> tags? I'm applying this style to a Wordpress site and I've noticed that, since all quotations have paragraphs, the first-child will affect quotations as well.

Thank you again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment