Загрузка...

Текстовые эффекты в CSS

Вы уже умеете выравнивать, оформлять и подключать шрифты. Текстовые эффекты добавляют отделку сверху — мягкую тень, многоточие при нехватке места или перенос неудобных длинных строк. Держите их лёгкими, чтобы текст оставался читаемым.

Небольшой набор инструментов

📊 Текстовые эффекты одним взглядом

Инструмент Повседневная роль
text-shadow Мягкая глубина или свечение за глифами (смещение, размытие, цвет)
text-overflow Как заканчивается обрезанный текст — часто ellipsis (…)
overflow + white-space Партнёры, нужные многоточию (hidden + nowrap)
overflow-wrap Ломает длинные слова/URL, чтобы влезли в коробку
writing-mode Пускает текст в другом направлении (например вертикально)

Эффекты — приправа, не само блюдо. Заголовок может любить спокойную тень; длинному абзацу редко нужен фейерверк.

text-shadow — смещение, размытие, цвет

Порядок обычно такой: горизонтальное смещение, вертикальное, радиус размытия, затем цвет. Малые значения спокойны; огромное размытие пачкает буквы.

Базовый text-shadow

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Многослойные тени

Можно перечислить несколько теней через запятую — удобно для мягкого «подъёма» без жёсткого контура.

Два мягких слоя

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

Многоточие, когда текст шире коробки

text-overflow: ellipsis работает только с обрезкой: обычно overflow: hidden и white-space: nowrap на коробке с ограниченной шириной.

Многоточие на узкой метке

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — укротить длинные слова

Длинный URL или строка без пробелов может разорвать узкую колонку. overflow-wrap: break-word (старый псевдоним word-wrap) позволяет браузеру ломать внутри слова при необходимости.

Ломать длинные строки

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — вертикальный взгляд

writing-mode меняет направление строк. Вертикальные значения хороши для боковых меток или декоративных заголовков — не для обычных абзацев.

Вертикальный взгляд на текст

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

Спокойная привычка для заголовков

Одной мягкой тени на коротком заголовке часто достаточно. Избегайте тяжёлого свечения на основном тексте и ставьте многоточие только там, где места правда мало.

Лёгкая полировка заголовка

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Попробуйте сами

  1. Добавьте мягкий text-shadow к заголовку (малые смещения, умеренное размытие).
  2. Через запятую наложите вторую более светлую тень.
  3. Соберите метку с ellipsis: max-width, overflow: hidden, nowrap, ellipsis.
  4. Положите длинный URL в узкую коробку и задайте overflow-wrap: break-word.
  5. Попробуйте writing-mode: vertical-rl на короткой боковой метке — затем вернитесь к обычному чтению.

Частые ошибки

  • Неоновые многослойные тени на длинных абзацах (тяжело читать)
  • text-overflow: ellipsis без overflow: hidden и nowrap
  • Ломать каждое слово агрессивным word-break, когда хватает overflow-wrap
  • Вертикальный writing-mode для целых статей
  • Смешивать этот урок с @font-face / загрузкой веб-шрифтов (прошлый урок)

Кратко

  • text-shadow использует смещение, размытие и цвет — держите значения скромными
  • Несколько теней можно наслоить для мягкого подъёма
  • Многоточию нужны overflow, nowrap и ограничение ширины
  • overflow-wrap помогает длинным словам и URL
  • writing-mode — специальный инструмент; повседневный текст остаётся горизонтальным

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 29 из 35
Css Урок