smsc banner 468x60smsc banner 728x90smsc banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180

Как создать эффект буквицы с помощью CSS

Вы можете использовать псевдоэлемент CSS ::first-letter для создания красивых буквиц для ваших статей. Буквицы — это просто первая заглавная буква абзаца с гораздо большим размером шрифта, который имеет глубину двух или более строк обычного текста. Давайте посмотрим на пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drop Caps with CSS</title>
<style>
    p::first-letter {
        float: left;
        font-size: 5em;
        font-weight: bold;
        line-height: 1;
        text-shadow: 2px 2px 6px #000;
        margin: -0.07em 0.1em -0.1em 0;
    }
</style>
</head>
<body>
    <p>Tempor ipsum dolor sit amet...</p>
</body>
</html>
flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как добавить CSS стили к элементу с дата атрибутом в HTML

Чтобы добавить CSS к <div> с определённым data атрибутом, можно использовать селектор атрибутов в вашем CSS-файле. Вот как это сделать: Объяснение Пример Вот пример, который добавляет стили к вашему <div>: В этом примере <div> с атрибутом data-container=»outer» будет иметь светло-серый фон, рамку и отступы. Текст внутри <div> будет выровнен по центру.
Подробнее

Как анимировать фоновый цвет элемента при наведении курсора мыши с помощью CSS

Вы можете использовать CSS-свойство transition, чтобы плавно анимировать background-color элемента при наведении курсора мыши. Давайте посмотрим пример, чтобы понять, как это работает:
Подробнее