Например:
Суббота, 04.05.2024, 16:58 Регистрация Карта сайта RSS Лента
Игровые новости Топ Сайтов Статьи Загрузить изображение Игровой форум Картинки
  • Страница 1 из 1
  • 1
Форум » Система Ucoz » Скрипты от GaMe Portals » Эффект размытого текста (При наведении мыши на текст,он становится видимым!)
Эффект размытого текста
Dimas777
Дата: Понедельник, 19.08.2013, 16:36 | Сообщение № 1
ICQ пользователя:
Skype пользователя:
Сайт пользователя:

Оффлайн
Сообщений: 300
Награды: 2
 


Установка:

CSS:

Код
P {   
color:transparent; /* Цвет текста такой же, как и фон */   
text-shadow:0 0 8px #7F7F7F; /* Тень текста. Создаем размытие... */   
text-transform:uppercase; /* Все буквы заглавные */   
font:17pt Verdana; /* Размер и семейство шрфита */   
}


Как видите, мы просто напросто сделали текст таким же, как и фон, за это отвечает значение transparent. После чего добавили свойство text-shadow, тень текста, и не задавая ему параметров сдвига задали лишь радиус размытия. Получился вот такой вот красивый эффект размытия.

Так же, можно еще добавить красивый эффект появления четкости текста, с помощью псевдокласса :hover и transition. Выглядеть будет красиво, да и потом, это делается все очень просто:

CSS:

Код
P {   
...   

-webkit-transition:All 1s ease;   
-moz-transition:All 1s ease;   
-o-transition:All 1s ease;   
}   
P:hover {   
text-shadow:0 0 1px #7F7F7F; /* Ставим радиус размытия 1 */   
}


При наведении курсора, радиус размытия плавно изменяется на 1, а от этого размытие будет, но не таким сильным. Можно поступить и по другому, задать свойству text-shadow все параметры по нулям и добавить свойство цвета. Тоже вариант неплохой, но придется писать две строки, когда можно обойтись лишь одной.

Ситочник и автор этого скрипт кода:webo4ka.ru

    
Game-Portals.3dn.ru - The Best.
Форум » Система Ucoz » Скрипты от GaMe Portals » Эффект размытого текста (При наведении мыши на текст,он становится видимым!)
  • Страница 1 из 1
  • 1
Поиск: