7.1 Властивість text-shadow
Властивість text-shadow у CSS дозволяє додавати тіні до тексту, створюючи ефект об'ємності і покращуючи візуальне сприйняття. Це властивість надає гнучкість у налаштуванні тіней, включаючи керування зміщенням, розмиванням і кольором тіні.
Властивість text-shadow задає тінь для тексту всередині елемента. Воно дозволяє контролювати положення, розмивання і колір тіні, додаючи візуальний акцент до текстових елементів.
Синтаксис:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Параметри:
offset-x: зміщення тіні по горизонталіoffset-y: зміщення тіні по вертикаліblur-radius: радіус розмивання тіні (необов'язково)color: колір тіні (необов'язково)
Значення:
offset-xіoffset-y: задають зміщення тіні відносно тексту. Можуть бути додатними або від'ємними значеннямиblur-radius: визначає ступінь розмивання тіні. Чим більше значення, тим розмитішою буде тінь. Значення за замовчуванням — 0 (без розмиття)color: задає колір тіні. Якщо колір не вказано, використовується колір тексту
Приклад використання:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Основна тінь</p>
<p class="shadow-blur">Тінь із розмиттям</p>
<p class="shadow-color">Тінь із кольором</p>
<p class="shadow-multiple">Кілька тіней</p>
</body>
Пояснення коду:
.shadow-basic: застосовує просту тінь зі зміщенням2pxпо горизонталі й вертикалі, радіусом розмивання2pxі напівпрозорим чорним кольором.shadow-blur: додає більший ступінь розмивання (5px), створюючи більш розмиту тінь.shadow-color: застосовує тінь із кольором (червоний).shadow-multiple: застосовує дві тіні з різними зміщеннями та розмиттями, створюючи складний багатошаровий ефект
7.2 Приклади
1. М'яка тінь
М'яка тінь із великим радіусом розмивання:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">М'яка тінь тексту</p>
</body>
Пояснення коду:
.soft-shadow: застосовує м'яку тінь без зміщення і з великим радіусом розмиття (10px), створюючи легкий сяючий ефект навколо тексту
2. Яскрава тінь
Тінь із яскравим кольором і невеликим розмиттям:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Тінь із яскравим кольором</p>
</body>
Пояснення коду:
.colorful-shadow: застосовує тінь із яскравим кольором (синій), зміщенням3pxі радіусом розмиття5px
3. Кілька тіней
Кілька тіней із різними параметрами:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Кілька тіней тексту</p>
</body>
Пояснення коду:
.multi-shadow: застосовує дві тіні з різними параметрами: одну з невеликим зміщенням і розмиттям, і іншу з більшим зміщенням і розмиттям червоного кольору
7.3 Важливі моменти
Важливі моменти при використанні text-shadow
Сумісність браузерів
Властивість text-shadow підтримується всіма сучасними браузерами, включаючи Google Chrome, Firefox, Safari, Edge та Opera. Однак важливо перевіряти відображення тіней у старих версіях браузерів для забезпечення кросбраузерної сумісності.
Продуктивність
Використання складних тіней з великою кількістю зміщень і розмиття може вплинути на продуктивність, особливо на мобільних пристроях. Оптимізуйте тіні для кращої продуктивності та тестуйте на різних пристроях.
Доступність
Переконайтеся, що тіні не погіршують читабельність тексту. Контраст між текстом і фоном має залишатися достатнім для всіх користувачів, включаючи людей з порушеннями зору.
Властивість text-shadow надає солідні інструменти для створення тіней тексту в CSS. Воно дозволяє додавати різні ефекти, від простих тіней до складних багатошарових тіней із різними кольорами й розмиттям.
Використання text-shadow допомагає покращити візуальне сприйняття тексту, додаючи глибину і об'єм до дизайну веб-сторінок. Важливо пам'ятати про сумісність браузерів і продуктивність при застосуванні складних тіней, а також про доступність для всіх користувачів.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ