Властивості CSS text-shadow
CSS має властивістьtext-shadowдля додавання тіні на кожну букву тексту. Сама властивість була представлена ще CSS2, але не підтримувалася браузерами. Потім ситуація почала змінюватися на краще.
Властивістьtext-shadowдобре тим, що дозволяє створювати цікаві ефекти з текстом без необхідності використовувати зображення. А отже текст доступний пошукачам і т.д.
Найпростіший приклад використання цього стилю виглядає так.
Приклад заголовка з тінню
У цьому прикладі ми додаємо до заголовка другого рівня червону тінь, яка відкидається трохи вправо та вниз щодо самого тексту. У прикладі використовувалися параметри для відступів та кольору тіні. Існує також можливість зробити тінь розмитою. Для цього додається ще один необов'язковий параметр після відступів (зверніть увагу, що колір тіні повинен вказуватися або останнім або першим). Можна використовувати негативні значення, щоб змінити напрям тіні (ліворуч та вгору). До речі, браузери на движку WebKit підтримують колір у форматі rgba, що дозволяє використовувати напівпрозорість.
Заголовок з розмитою тінню
На основі цієї властивості можна досягти цікавих ефектів на сторінці сайту. Наприклад, використання тіні дозволяє зробити текст більш читаним, якщо контраст між символами та тлом невеликий. Порівняйте два варіанти білого тексту на блідо-синьому тлі.
Як бачите, перший рядок практично неможливо розглянути, а текст з тінню на другому рядку добре читається.
Багатошарові тіні
У властивостіtext-shadow є одна цікава особливість - ви можете створювати більш ніж одну тінь. На перший погляд це здається незвичайним, але користувачі, які працюють з графікою,знайомі з технікою створення об'ємних букв (утиснених або опуклих) за допомогою декількох тіней.
Створимо на сірому фоні два варіанти об'ємного тексту.
Втім, потрібно бути обережним у використанні цих ефектів, оскільки не всі браузери підтримують кілька тіней.
Використовуючи кілька тіней, можна досягти іншого ефекту - створення контурів для букв.
Текст із контуром
Неонове світіння
Якщо створити тінь без зміщення та розмити її, то отримаємо ефект неонового свічення.
додаткова інформація
Цікавий приклад, що демонструє властивість text-shadow за допомогою сценарію.
Stylish text with the CSS text-shadow property (кілька прикладів, зокрема приклад вогняного тексту).