Раніше створити цікаві текстові ефекти, наприклад, складну тінь (найбанальніша тінь не рахується) можна було тільки силами графічного редактора на кшталт Adobe Photoshop, отримавши на виході тільки картинку у форматі .gif, .png або .jpg. Але з розвитком стандартів ситуація змінюється. Вже зараз CSS3 відкриває запаморочливі можливості оформлення для веб-майстрів, потрібно тільки знати як використовувати цю міць. Давайте розглянемо деякі класні текстові ефекти які можна отримати, використовуючи лише одну просту властивість тексту в CSS3 - text-shadow.

Перед тим як перейти безпосередньо до ефектів, трохи теорії. Властивість text-shadow в CSS3 дозволяє задавати:

• зміщення тіні по відношенню до тексту по осях X і Y - X-offset і Y-offset;
• рівень розмиття тіні (хоча може бути в даному випадку краще підходить термін - розтушовка) - blur;
• колір тіні - color.

Але це ще не все. Ви може так само задавати декілька значень для кожного параметра. У цьому і криється вся міць! Давайте подивимося що з цим можна придумати.

Вінтажний або ретро текст

Ефект досить простий, але в той же час ефектний. У його основі дві тіні, одна з них того ж кольору, що і сам текст, інша тінь зазвичай кольору фону.

Неоновий текст

Цей ефект складніший за попередній. У загальній складності накладено 8 тіней. Кожен рівень має власне значення розтушовування (8 значень) і кольору (2 значення).

Інсет (втиснутий текст)

Ефект вдавленого тексту, досить просто реалізується за рахунок невеликого зміщення тіні по осі Y і легкої розтушовування.

Анагліфний текст

Крутий ефект, де крім усього іншого використовуються можливості RGBa (у тому числі альфа-канал). Ще кілька років тому було складно уявити що таке можливе без графічного редактора, тепер ось - будь ласка!

Палаючий текст

Ще один неймовірний ефект і, як бачите, досить складний. Кожна тінь зміщується в різну сторону і має різні параметри кольору та розмиття. Результат вражає.

«Настільна гра»

По суті є багаторівневою варіацією ефекту «Ретро текст». Всі тіні чіткі, без розтушовування.

Подивитись як ці ефекти виглядають в живу, (а не тільки на скріншотах) можна на цій демо-сторінці (браузери IE нижче 7-ї версії та деякі інші старіші браузери властивість text-shadow не підтримують). Ці ефекти - верхівка айсберга, кількість можливих варіантів складно уявити. Адже це всього лише одна властивість тексту - тінь! Чим не демонстрація незвичайних можливостей CSS3? Взагалі дуже радує розвиток веб стандартів, головне щоб за цим встигали браузери і однаково сприймали вказані значення параметрів CSS і HTML.

Джерело: http://design-mania.ru