3 ms·
For anyone wondering how that initial letter is made to look like that: 1. The background flourish is created with ::before and a custom web font 2. The flour
by 90s_dev 1y ago
For anyone wondering how that initial letter is made to look like that:
1. The background flourish is created with ::before and a custom web font
2. The flourish letter is found via content: attr() on the parent element
3. The actual big letter itself is also done via custom web font & float: left
- wavemode 1y agoIt was only upon reading this comment that I even realized the initial letter is text. At first glance I assumed it was just an inline-block image.
- typesarecool 1y agoLooks like all the CSS is /* Drop caps / .first-paragraph { position: relative; padding-top: 0.2em; &::first-letter { /* font-weight: bold; */ font-size: 4em; float: left; margin: 0.15em 0.05em 0 0; font-family: 'EBGaramond-InitialsF2', serif; font-display: block; line-height: 0.83em; /* Fix alignment in Chrome */ } &::before { margin: 0.15em 0.05em 0 0; font-size: 4em; font-family: 'EBGaramond-InitialsF1', serif; content: attr(data-first-letter); color: gray; position: absolute; left: 0; top: 0.28em; } }
- lkuty 1y agoAnd the fonts come from https://github.com/georgd/EB-Garamond-Initials https://github.com/georgd/EB-Garamond-Initials