используя позиционирование, создайте объемную надпись из обычного текста без картинок. эта надпись должна быть привязана к своему месту в абзаце, подобно обычному слову. CSS

Для создания объемной надписи из обычного текста с помощью CSS и позиционирования, мы можем использовать разные стили, чтобы добиться эффекта 3D. Ниже приведено пошаговое объяснение, как это сделать.

HTML-код

Сначала создадим HTML-разметку:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Объемная надпись</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>
        Это пример <span class="text-3d">объемной надписи</span> в абзаце.
    </p>
</body>
</html>

CSS-код

Теперь добавим стили в файл styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    margin: 50px;
}

.text-3d {
    display: inline-block; /* Делает элемент блочным для применения 3D-эффектов */
    position: relative; /* Позиционируем элемент относительно его места в тексте */
    color: #ff6347; /* Цвет текста */
    font-size: 40px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
}

.text-3d::before,
.text-3d::after {
    content: attr(data-text); /* Используем атрибут data-text для создания копии текста */
    position: absolute; /* Позиционируем копии текста абсолютно */
    top: 0; /* Для выравнивания по верхнему краю */
    left: 0; /* Для выравнивания по левому краю */
    color: rgba(0, 0, 0, 0.2); /* Цвет теней (прозрачный черный) */
    z-index: -1; /* Убираем элемент позади основного текста */
}

.text-3d::before {
    transform: translate(3px, 3px); /* Смещаем тень вправо и вниз */
}

.text-3d::after {
    transform: translate(-3px, -3px); /* Смещаем тень влево и вверх */
}

Объяснение

1. HTML Разметка:

   • Мы обернули текст "объемной надписи" в элемент <span> с классом text-3d, чтобы применить к нему стили.

2. CSS-Стиль:

   • display: inline-block; — позволяет элементу вести себя как блочный элемент, сохраняя при этом возможность располагаться внутри строки текста.
   • position: relative; — задает относительное позиционирование, которое нужно для абсолютного позиционирования дочерних элементов (псевдоэлементов).
   • Создадим ::before и ::after, чтобы добавить тени к тексту, используя свойства color и transform.
   • content: attr(data-text); — позволяет нам дублировать текст, который будет использоваться для создания теней.

3. Тени:

   • Разные translate значения для ::before и ::after помогают создать эффект объема, создавая иллюзию, что текст приподнят над фоном.

Заключение

Теперь, открыв HTML в браузере, вы увидите объемную надпись, которая интегрирована в текст абзаца. Этот метод позволяет создать текстовый эффект без использования изображений, базируясь только на CSS. Вы можете эксперименты с цветами, размерами и смещениями для достижения различных эффектов!