Текст і тінь
Колись текст із тінню був у тренді і можна було побачити подібний ефект практично на будь-якому сайті. Але коли більшість браузерів почали підтримувати властивість text-shadow, мода вже минула, і тепер текст із тінню зустрічається досить рідко. Однак text-shadow має кілька інших способів застосування, про які небагато хто знає. Цією властивістю можна робити контурний текст, випинати його, створювати світіння, розмиття та інше.
Використання text-shadow
Для цієї властивості вказуються чотири параметри: колір тіні, зміщення по горизонталі і вертикалі, та радіус розмиття тіні (рис. 1).
Кольори можна писати на початку або в кінці всіх параметрів у будь-якому форматі CSS. Позитивні значення зміщення "кидають" тінь вправо і вниз, а негативні, відповідно, вліво і вгору. Щоб тінь оточувала текст, досить встановити нульові значення зміщення. Радіус розмиття вказує, наскільки гострою буде тінь. Чим більший радіус розмиття, тим м'якше виглядає тінь.
Великим плюсом text-shadow є можливість додавати одразу декілька різних тіней, перераховуючи їх параметри через кому. Ця особливість, в основному, дозволяє створювати різні ефекти.
На жаль, IE до версії 10.0 не підтримує text-shadow, тому в цьому браузері ми не побачимо жодної краси.
Контурний текст
Контурний текст характеризується тим, що кожна буква обводиться лінією, колір якої відрізняється від кольору тексту. Найкраще цей ефект виглядає з грубим шрифтом великого розміру, наприклад, для заголовків. Для основного тексту використання контуру лише погіршує читабельність.
Контур можна створити двома методами. У першому методі встановлюємо нульове зміщення тіні та невеликий радіус її розмиття, буквально 1-2 пікселя (приклад 1). Збільшення значення розмиття перетворює контур у світіння навколо тексту, що вже інший ефект.
Контур, створений цим методом, показано на рис. 1. Контур виходить трохи розмитим, тому для тих, хто хоче отримати чітку лінію, призначений другий метод. Він полягає у використанні чотирьох різких тіней одного кольору, які зміщуються в різні кути на один піксель (приклад 2).
Вид такого контуру показаний на рис. 3. Видно, що контур виходить більш виразним.
Триизмерний текст
Для додавання ефекту тривимірного тексту, показаного на рис. 4, використовується одночасно кілька тіней, які зміщуються відносно одна одної на один піксель по горизонталі та вертикалі.
Особисто мені подібний текст нагадує написи в стилі ретро і ще раз краще підходить для заголовків, а не для основного тексту веб-сторінки.
Кількість тіней залежить від того, наскільки ви хочете "висунути" текст вперед. Більша кількість підвищує "глибину" літер, менша, навпаки, знижує тривимірність. У прикладі 3 використовуються п'ять тіней одного кольору.
Тиснення тексту
Для створення ефекту тиснення тексту або, інакше, рельєфу, колір тексту повинен збігатися з кольором фону. Одна частина "виступаючих" над поверхнею літер мовляв освітлена, інша частина знаходиться у тіні.
Для досягнення подібного ефекту нам знадобиться дві тіні - білу тінь ми зміщуємо вліво вгору на один піксель, а темно-сіру вправо вниз (приклад 4).
Світіння
Світіння навколо тексту - це та сама тінь, тільки вона яскрава і контрастна. Таким чином, для створення ефекту світіння досить змінити колір тіні та встановити бажаний радіус розмиття. Оскільки світіння навколо тексту повинно бути рівномірним, то зміщення тіні треба встановити нульовим. На рис. 6 показаний приклад світіння різних кольорів.
Розмиття
Тінь сама по собі розмивається, тому якщо залишити лише тінь, а сам текст приховати, ми отримаємо розмиті літери (рис. 7), причому ступінь розмиття легко регулювати через параметр text-shadow.
Для сховання оригінального тексту досить встановити колір як transparent (приклад 6). Колір тіні після цього виступає коліром тексту, а радіус розмиття встановлює ступінь нечіткості літер.
Тінь і псевдокласи
Тінь не обов'язково додавати безпосередньо до тексту, властивість text-shadow чудово поєднується з псевдокласами :hover та :first-letter. Через це отримуються цікаві ефекти з текстом, наприклад контурна перша літера абзацу або світіння посилання при наведенні на нього курсора миші. У прикладі 7 показано такі прийоми.