Используем свойство text-shadow для эффектного оформления текста


Используем свойство text-shadow для эффектного оформления текста

1197
8 из 10
Проголосовало: 4




Как работает свойство text-shadow

Свойство CSS3 text-shadow служит для добавления тени к любому, связанному с текстом элементу HTML. При задании свойства надо указать смещение по осям Х и Y, размывание и цвет тени. Кроме того, можно не ограничиваться только одной тенью, а задать несколько, определяя параметры для них через запятую!

Винтаж/ретро

Code
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Как работает:

Эффект винтажа создается двумя тенями, но первая имеет тот же цвет, что и фон, чтобы сложилось впечатление, что вторая тень, которая имеет тот же цвет, что и текст (тонкая темно-серая полоска), смещена вправо вниз.

Неон

Code
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 уровней теней имеет все большее и большее значение размывания, что затемняет слои. Это смесь между ярким внутренним свечением и большой областью внешней пурпурной ауры.

Вдавленный текст

Code
text-shadow: 0px 2px 3px #666;

Как работает

Эффект вдавленного текста очень часто используется с применением свойства text-shadow. Тень немного смещена по оси Y для создания эффекта небольшого углубления. На темном фоне светлая тень смещается вниз, а на светлом фоне темная тень смещается вверх.

Анаглиф

Code
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

Как работает

Эффект анаглиф создает впечатление использования 3D изображений. Воспроизводится с помощью смешивания свойства text-shadow с установкой цвета RGBa. RGBa позволяет устанавливать прозрачность для текста и тени на уровне 50%, так что ниже лежащий текст становится виден сквозь верхние слои.

Огонь

Code
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;

Как работает

Эффект огня - это еще одно использование множественных теней. Каждая тень смещена в различных направлениях, использует различные степени размывания , а также используется смесь теплых цветов для создания впечатления пламени.

Фанера

Code
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

Как работает

Эффект фанеры создается множеством теней, где каждый следующий слой смещается все больше и больше, а также происходит чередование цветов. Кроме того, размывание не используется совсем, чтобы сохранить очертания оригинального текста.

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://line25.com/articles/using-css-text-shadow-to-create-c...
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 2
    Пользователей: 2
    Топ пользователей: