наверх





Делаем не просто размытый текст, а с красивым эффектом появления каждой буквы. Конечно, в связке с псевдоклассом :hover


Уже был пример эффекта размытого текста. В этом примере я покажу, как сделать, что бы каждая отдельная буква была отдельно от слова, то есть эффект был по буквенный. В том примере слово показывалось четко при наведении на любую букву, в этом же примере слово полностью показываться не будет, лишь буквы.

В примере будут задействован transition , для плавной смены эффекта, и text-shadow, для самого эффекта размытия.

CSS


.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; /* Тень текста. Создаем размытие */
}


Написав CSS код, я думаю вы уже догадались, как будет выглядеть HTML код. Каждая буква будет отдельно помещена в тег <span>. Это очень просто, но есть минус. Для создания больших текстов с таким эффектом, отдельно упаковывать каждую букву займет очень много времени. Поэтому данный пример сойдет для создания коротких заголовков.

HTML


<div class="blur">
<span>р</span>
<span>а</span>
<span>з</span>
<span>м</span>
<span>ы</span>
<span>т</span>
<span>ы</span>
<span>й</span>
<span>&nbsp;</span>
<span>т</span>
<span>е</span>
<span>к</span>
<span>с</span>
<span>т</span>
</div>


Код & nbsp; предназначен для создания пробела в HTML коде.




Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.