andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update drop-cap.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-09-28 14:10:05 +03:00
committed by GitHub
parent 3761e5d496
commit 64bdc13c6a
1 changed files with 11 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
snippets/drop-cap.md
View File

@ -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
<p>
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.
</p>
<p>
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.
</p>
<p>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.</p>
<p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.</p>
```
#### 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 `<p>` 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
<span class="snippet__support-note">✅ No caveats.</span>
- https://caniuse.com/#feat=first-letter
<!-- tags: visual -->