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

Цвет текста
Добавление тени

Цвет текста

Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color:blue; }
      h1 { color:#00ff00; }
    </style>
  </head>

  <body>
    <h1>Заголовок имеет свой собственный цвет текста</h1>
    <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве
    которого для него выступает элемент body.</p>
  </body>
</html>

Попробовать »

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

Добавление тени

Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
цвет для тени

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>			
      h1 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>

  <body>
    <h1>Текст с тенью</h1>
  </body>
</html>

Попробовать »

С помощью свойства text-shadow можно задавать несколько эффектов тени к тексту, каждая тень в таком случае должна отделяться от предыдущей запятой:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>

  <body>
    <h1 class="test1">Текст с тенью</h1>
    <h1 class="test2">Текст с тенью</h1>
  </body>
</html>

Попробовать »

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

С этой темой смотрят: