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

1292
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Последние темы
    Опрос
    466
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: