logo

👨‍💻 "Drop Cap" для текста с помощью CSS

👨‍💻 "Drop Cap" для текста с помощью CSS
👨‍💻 "Drop Cap" для текста с помощью CSS

Drop Cap (от англ. «dropped capital») — это типографский прием, при котором первая буква новой главы увеличивается и опускается вниз, чтобы занять несколько строк.



В CSS это может быть достигнуто с помощью свойства initial-letter, значение которого указывает количество строк, на которые нужно поместить символ.
p::first-letter {
initial-letter: 2;
-webkit-initial-letter: 2;
margin-right: 10px;
}
p span {
margin: 0;
color: tomato;
font-weight: bold;
}

Цифра 2 в initial-letter: 2; означает, что высота первой буквы в абзаце равна двум строкам

👍- если было полезно | ➡️ WebTaverna

Канал источник:@WebTaverna