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

Подчёркивание, зачёркивание и надчёркивание

В ЦСС дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью text-decoration. Кроме того, можно задать вид, стиль и цвет используемой линии:

header a {
  /* Убираем подчёркивание у ссылок в шапке */
  text-decoration: none;
}
article abbr {
  /* Подчёркиваем аббревиатуры */
  text-decoration: underline dotted #ccc;
}
article em {
  /* Подчёркиваем важные моменты в статье */
  text-decoration: underline 5px yellow;
}
article del {
  /* Зачёркиваем удалённые кусочки статьи */
  text-decoration: line-through;
}

In CSS type size of the screen text usually lies in the range of 12 to 16 points and line spacing is 120–140 % of the type height size.

Тень

Чтобы добавить тень к тексту, используют свойство text-shadow. Чтобы задать тень, указывают её смещение по горизонтали и вертикали, радиус размытия и цвет. Самое интересное — можно разом задать несколько теней:

.neon {
  color: tomato;
  /* Задаём тень-свечение: с каждым шагом меняется
     радиус и цвет тени */
  text-shadow: 
    0 0 10px orangered,
    0 0 20px firebrick,
    0 0 40px maroon,
    0 0 80px darkred;
}
.rainbow {
  color: #fff;
  /* Задаём тень-радугу: с каждым шагом меняется
     цвет и смещение влево-вниз */
  text-shadow: -4px 4px #ef3550,
    -8px 8px #f48fb1,
    -12px 12px #7e57c2,
    -16px 16px #2196f3,
    -20px 20px #26c6da,
    -24px 24px #43a047,
    -28px 28px #eeff41,
    -32px 32px #f9a825,
    -36px 36px #ff5722;
}
.netflix {
  color: #fff;
  /* Задаём 100 теней с шагом в 1 пк */
  text-shadow: 0px 0px transparent,
    1px 1px #aaa,
    2px 2px #aaa,
    3px 3px #aaa,
    4px 4px #aaa,
    ...,
    100px 100px #aaa;
}

Restrooms

Rainbow

Netflix

В следующем совете расскажу о самом интересном: о переносах в вебе и ЦСС.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы