diff --git a/snippets/drop-cap.md b/snippets/drop-cap.md index e820d3c34..93e264a62 100644 --- a/snippets/drop-cap.md +++ b/snippets/drop-cap.md @@ -1,57 +1,30 @@ -### Drop cap +--- +title: Drop cap +tags: visual,beginner +--- -Makes the first letter in the first paragraph bigger than the rest of the text, -and below the first line of said first paragraph. Often used to signify the -beginning of a new section. - -#### HTML +Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section. ```html -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo - ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. - Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, - rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet - congue erat sodales commodo. Donec magna erat, imperdiet non odio sed, sodales - tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque - efficitur. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo - ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. - Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, - rhoncus tincidunt ante dictum at. -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.

+

Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.

``` -#### CSS - ```css p:first-child::first-letter { - color: blue; + color: #5f79ff; float: left; - margin: 0 12px 3px 0; - font-size: 4rem; + margin: 0 8px 0 4px; + font-size: 3rem; font-weight: bold; line-height: 1; } ``` -#### Demo - #### Explanation -1. The `::first-letter` pseudo selector selects the first "letter" of text - within an element (in this case, the `

` element). Coupled with the use of - `:first-child` selector before `::first-letter` ensures that we only affect - the very first paragraph instead of all paragraphs. - -2. `float: left` is applied so that it appears "dropped" within the paragraph. +- Use the `::first-letter` pseudo-element to style the first element of the paragraph, use the `:first-child` selector to select only the first paragraph. #### Browser support -✅ No caveats. - - https://caniuse.com/#feat=first-letter - -