Типографика в вёрстке
Декоративные свойства
В прошлых советах я рассказывал об управлении кеглем, интерлиньяжем, выключкой, регистром, красной строкой, буквицей и выделением. Сегодня расскажу о декоративных свойствах в ЦСС.
Типографика в вёрстке
Декоративные свойства
Подчёркивание, зачёркивание и надчёркивание
В ЦСС дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.