Свойство CSS3 text-shadow постепенно начинает широко использоваться для создания теней (как в Фотошоп), которые придают элементам страниц глубину, объем и выделяют их в контенте. Но это далеко не все возможности свойства text-shadow. Подключив воображение и опробовав различные настройки цвета, смещения и размытия можно создавать впечатляющие эффекты для текста! Эффекты На демонстрационной странице представлены шесть текстовых эффектов винтаж/ретро, неон, вдавленный, анаглифный, огонь и фанера. Код, представленный ниже в статье можно использовать в своих приложениях для получения аналогичных эффектов без применения изображений. Конечно же, они доступны только в браузерах, поддерживающих свойство text-shadow (Safari, Chrome, Firefox). Как работает свойство text-shadow Свойство text-shadow Свойство CSS3 text-shadow служит для добавления тени к любому, связанному с текстом элементу HTML. При задании свойства надо указать смещение по осям Х и Y, размывание и цвет тени. Кроме того, можно не ограничиваться только одной тенью, а задать несколько, определяя параметры для них через запятую! Винтаж/ретро Винтаж/ретро 1 text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; Как работает: Эффект винтажа создается двумя тенями, но первая имеет тот же цвет, что и фон, чтобы сложилось впечатление, что вторая тень, которая имеет тот же цвет, что и текст (тонкая темно-серая полоска), смещена вправо вниз. Неон Неон 1 text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; Как работает Эффект неонового свечения создается с помощью 8 уровней теней. Основной текст имеет белый цвет, а каждый из 8 уровней теней имеет все большее и большее значение размывания, что затемняет слои. Это смесь между ярким внутренним свечением и большой областью внешней пурпурной ауры. Вдавленный текст Выдвленный текст 1 text-shadow: 0px 2px 3px #666; Как работает Эффект вдавленного текста очень часто используется с применением свойства text-shadow. Тень немного смещена по оси Y для создания эффекта небольшого углубления. На темном фоне светлая тень смещается вниз, а на светлом фоне темная тень смещается вверх. Анаглиф Анаглиф 1 text-shadow: 8px 8px 0 rgba(255,0,180,0.5); Как работает Эффект анаглиф создает впечатление использования 3D изображений. Воспроизводится с помощью смешивания свойства text-shadow с установкой цвета RGBa. RGBa позволяет устанавливать прозрачность для текста и тени на уровне 50%, так что ниже лежащий текст становится виден сквозь верхние слои. Огонь Огонь 1 text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; Как работает Эффект огня - это еще одно использование множественных теней. Каждая тень смещена в различных направлениях, использует различные степени размывания , а также используется смесь теплых цветов для создания впечатления пламени. Фанера Фанера 1 text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff; Как работает Эффект фанеры создается множеством теней, где каждый следующий слой смещается все больше и больше, а также происходит чередование цветов. Кроме того, размывание не используется совсем, чтобы сохранить очертания оригинального текста.