7.1 Властивість text-decoration
CSS надає різні властивості для стилізації та декорування тексту на веб-сторінках. Властивості text-decoration, text-transform і text-shadow дозволяють додавати підкреслення, змінювати регістр тексту та створювати тіні, що допомагає зробити текст більш виразним і привабливим.
Властивість text-decoration керує декоративними ефектами тексту, такими як підкреслення, надкреслення і закреслення. Вона також дозволяє встановити колір і стиль ліній, що використовуються для декорування тексту.
Значення:
none: прибирає всі текстові декораціїunderline: підкреслює текстoverline: додає лінію над текстомline-through: додає лінію через текст (закреслення)blink: текст блимає (підтримується не всіма браузерами)text-decoration-color: встановлює колір лінії декораціїtext-decoration-style: встановлює стиль лінії (solid, double, dotted, dashed, wavy)text-decoration-thickness: встановлює товщину лінії декорації
Приклад використання:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Цей текст підкреслений.</p>
<p class="overline">Цей текст надкреслений.</p>
<p class="line-through">Цей текст закреслений.</p>
<p class="custom-decoration">Цей текст підкреслений хвилястою червоною лінією.</p>
</body>
7.2 Властивість text-transform
Властивість text-transform керує перетворенням тексту, змінюючи регістр літер. Це корисно для автоматичної зміни тексту в заголовки, малі літери тощо.
Значення:
none: без перетворень (значення за замовчуванням)capitalize: перша літера кожного слова стає великоюuppercase: всі літери стають великимиlowercase: всі літери стають маленькимиfull-width: перетворює текст у повний (подвійний) розмір (підтримується не всіма браузерами)
Приклад використання:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">цей текст буде з великої літери для кожного слова.</p>
<p class="uppercase">цей текст буде повністю великими літерами.</p>
<p class="lowercase">ЦЕЙ ТЕКСТ БУДЕ ПОВНІСТЮ МАЛЕНЬКИМИ ЛІТЕРАМИ.</p>
</body>
7.3 Властивість text-shadow
Властивість text-shadow додає тінь до тексту, що дозволяє створити візуальні ефекти та покращити читабельність тексту на веб-сторінці.
Значення:
<offset-x>: зміщення тіні по осі X (горизонтально)<offset-y>: зміщення тіні по осі Y (вертикально)<blur-radius>: радіус розмиття тіні (необов'язково)<color>: колір тіні (необов'язково)
Приклад використання:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Цей текст з тінню.</p>
<p class="multiple-shadows">Цей текст з кількома тінями.</p>
</body>
Пояснення коду:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: додає тінь із горизонтальним зміщенням 2px, вертикальним зміщенням 3px, радіусом розмиття 4px та напівпрозорим чорним кольоромtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: додає дві тіні з різними параметрами, створюючи складніший візуальний ефект
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ