Красивый эффект размытого текста
2625
9.2 из 10
Проголосовало: 11
Проголосовало: 11
В этом примере будет показано, как сделать, что бы каждая отдельная буква была отдельно от слова, то есть эффект был по буквенный, тоесть слово полностью показываться не будет, лишь буквы. В примере будут задействован transition , для плавной смены эффекта, и text-shadow, для самого эффекта размытия.
Установка:
CSS
Code
.blur {
cursor:pointer; /* Курсор "рука" */
}
span {
-webkit-transition:All 1.3s ease;
-moz-transition:All 1.3s ease;
-o-transition:All 1.3s ease;
color:transparent; /* Цвет текста такой же, как и фон */
text-shadow:0 0 8px #7F7F7F; /* Тень текста. Создаем размытие */
text-transform:uppercase; /* Все буквы заглавные */
font:20pt Verdana; /* Размер и семейство шрфита */
}
span:hover {
text-shadow:0 0 1px #747474; /* Тень текста. Создаем размытие */
}
cursor:pointer; /* Курсор "рука" */
}
span {
-webkit-transition:All 1.3s ease;
-moz-transition:All 1.3s ease;
-o-transition:All 1.3s ease;
color:transparent; /* Цвет текста такой же, как и фон */
text-shadow:0 0 8px #7F7F7F; /* Тень текста. Создаем размытие */
text-transform:uppercase; /* Все буквы заглавные */
font:20pt Verdana; /* Размер и семейство шрфита */
}
span:hover {
text-shadow:0 0 1px #747474; /* Тень текста. Создаем размытие */
}
Написав CSS код, я думаю вы уже догадались, как будет выглядеть HTML код. Каждая буква будет отдельно помещена в тег <span>. Это очень просто, но есть минус. Для создания больших текстов с таким эффектом, отдельно упаковывать каждую букву займет очень много времени. Поэтому данный пример сойдет для создания коротких заголовков.
Code
<div class="blur">
<span>г</span>
<span>у</span>
<span>л</span>
<span>я</span>
<span>ю</span>
<span> </span>
<span>н</span>
<span>а</span>
<span>w</span>
<span>e</span>
<span>b</span>
<span>o</span>
<span>4</span>
<span>k</span>
<span>k</span>
<span>.</span>
<span>r</span>
<span>u</span>
</div>
<span>г</span>
<span>у</span>
<span>л</span>
<span>я</span>
<span>ю</span>
<span> </span>
<span>н</span>
<span>а</span>
<span>w</span>
<span>e</span>
<span>b</span>
<span>o</span>
<span>4</span>
<span>k</span>
<span>k</span>
<span>.</span>
<span>r</span>
<span>u</span>
</div>
Код & nbsp; предназначен для создания пробела в HTML коде.
готово!
Автор публикации: Загрузка
Загрузка
- Оставить первым комментарий:
Меню сайта
Категории
Мини-чат
Последние комментарии
Это моя работа, которая велась давольно таки давно 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Времени было мало, поэтому я скачал полностью все, что было и сделал архив 
Последние темы
Опрос
Статистика
| 0 онлайн |
0 наших |
0 чужих |
0
Сегодня были
Топ пользователей:
 |  |  |  |  |  |
 |  |  |  |  |  |
- Обратная связь
- Правила
- RSS
- +18
- Мобильная версия
- Хостинг от uCoz
- Copyright - webo4ka.ru © 2010-2026 г.
- Design by Вовчик Администратор:)