Статьи

Как создать размытые текстовые эффекты в CSS3

Февраль 18, 2019

Вот отличный текстовый эффект, который я впервые увидел на веб-сайте Криса Койера . Размытый текст можно создать в CSS3, применив прозрачный цвет текста и текстовую тень: 


.blur-text
{
	color: transparent;
	text-shadow: 0 0 5px #000;
}

CSS3 размытый текст

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

Когда браузер поддерживает это, следующий код JavaScript добавит класс «texthadow» к элементу HTML. Поэтому мы можем использовать CSS-селектор «.textshadow .blur-text», чтобы убедиться, что он применяется только тогда, когда эффект не вызовет нежелательного поведения: 

 
if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}
предупреждение: размытое поведение Opera

Chrome и Firefox показывают размытый текст, и он отключен в IE. Тем не менее, Опера может быть странной; он поддерживает текстовую тень, но не любит применять его к прозрачному тексту. Это кажется ошибкой, поскольку применение цвета rgba (0,0,0,0) решает проблему.

Размытые ссылки

С небольшим дополнительным волшебством CSS3 мы можем плавно размывать ссылки при наведении или фокусировке. Это может быть приятным эффектом для меню навигации.

Мы определим класс «размытия» (или «размытия в» классах), который можно применять к любой ссылке. Ссылка будет размыта и вернется к нормальной фокусировке, когда она активна. Точно так же мы определим классы «размытия», которые размывают текст при наведении / фокусировке, т.е. 

 
<a href="#" class="blur in">starts blurred, ends un-blurred</a>
<a href="#" class="blur out">starts un-blurred, ends blurred</a>

Теперь нам требуются базовые стили CSS, которые применяются во всех браузерах — даже без поддержки текстовой тени: 

 
a.blur
{
	text-decoration: none;
	color: #339;
}

a.blur:hover, a.blur:focus
{
	text-decoration: underline;
	color: #933;
}

Следующий набор стилей применяется ко всем элементам .blur, независимо от того, имеют они фокус или нет:

  • мы удаляем ссылку подчеркивание и контур
  • установить цвет текста на прозрачный, и
  • применить переход CSS3, который плавно анимирует между no и full text-shadow. Эффект начинается через 100 мс и заканчивается через 400 мс после этого. 
 
.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
	text-decoration: none;
	color: rgba(0,0,0,0);
	outline: 0 none;
	-webkit-transition: 400ms ease 100ms;
	-moz-transition: 400ms ease 100ms;
	transition: 400ms ease 100ms;
}

Наконец, мы определяем наши два состояния тени текста. Третье свойство text-shadow определяет «количество» размытия. Он будет анимирован в диапазоне от 0 до 4 пикселей, но его можно изменить, если вы хотите более или менее размытое изображение: 

 
/* no blur */
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
	text-shadow: 0 0 0 #339;
}

/* full blur */
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
	text-shadow: 0 0 4px #339;
}

Просмотрите демонстрационную страницу размытия ссылки — источник содержит все необходимые CSS и JavaScript.

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

    42
    Share: