Войти
Регистрация

Цвет и тень текста в CSS

Цвет и тень для текста в CSS

Продолжаем добавлять краски в наши сайты и в этой теме у нас цвет текста и его тень.

В статье цвета в HTML из основ HTML Вы узнали какими бывают форматы цветов и как их генерировать.

Мы помним, что цвет задается простым значением color и свойством, например #FF0000

Тень текста добавляется немного другим образом, но не так уж и сложно.

h1 {
   text-shadow: 2px 2px 2px #000;
}

Результат: Текст с тенью

Здесь за тень текста отвечает свойство text-shadow, которое принимает 4 значения:

  • Первое - отвечает за выравнивание тени по горизонтали, т.е по оси X
  • Второе - отвечает за выравнивание тени по вертикали, т.е. по оси Y
  • Третье - отвечает за размытие тени. Чем больше, тем более размыта тень.
  • Четвертое - отвечает за цвет тени в формате HEX.

Что касается 4-го значения, то цвет можно указать и в формате RGB и задать прозрачность тени. Указываем черный цвет тени и делаем на половину прозрачным:

h1 {
   text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

Результат: Текст с теню

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

Также, можно в тени использовать несколько цветов, т.е. делать тень многослойной. Например.

h1 {
   text-shadow: 15px 15px 10px #000, 8px 8px 8px red, 4px 4px 4px green;
}

Результат: Текст с теню

Как видите, получилось 3 цвета. Просто после свойства text-shadow добавляете 4 параметра каждой тени через запятую и не забудьте всегда в конце каждого значения свойства ставить ;. Пробуйте, экспериментируйте.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?