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

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

К сожалению, не все старые версии браузеров поддерживают свойство тени текста. Браузер Internet Explorer версий 9 и ниже применяет свойство прозрачного цвета текста, но не создает эффект тени, так что текст становится невидимым. И нужно или прибегать к помощи библиотеки JavaScript Modernizr, или писать свой код для определения поддержки браузером свойства тени текста.

Если браузер поддерживает это свойство, следующий код JavaScript добавит класс “.textshadow” элементу HTML. Таким образом можно задавать свойства CSS классам .textshadow .blur-text, чтобы они применились, только если эффект размытого текста не вызовет проблем с отображением:

if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}

Браузеры Chrome и Firefox всех версий выводят размытый текст.

А у браузера Opera некоторых старых версий есть особенность — он поддерживает свойство тени текста, но не применяет его к прозрачному тексту. Вероятно, это ошибка браузера, так как применение цвета в формате rgba(0,0,0,0) решает проблему.

Браузер Internet Explorer поддерживает свойство тени текста, только начиная с версии 10. При этом и у поддерживающих версий встречаются проблемы с отображением.

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

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

Мы создадим класс “blur” или класс “blur in”, который можно применить к любой ссылке. Ссылка изначально будет размытой и вернется к нормальному состоянию, когда станет активной. Подобным образом зададим класс “blur out”, который сделает ссылку размытой при наведении указателя мыши или при выделении, например:

<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, которые создадут плавную анимацию от состояния без тени текста до полной тени текста. Эффект начнется через 100ms и закончится через 400ms.

.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;
}

После этого мы определяем оба состояния тени текста. Третье значение свойства тени текста устанавливает степень размытия. В нашем примере анимация начнется с 0 и закончится на 4px, но эти значения можно менять, если нужно больше или меньше размытия:

/* без размытия */
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
	text-shadow: 0 0 0 #339;
}
/* полное размытие */
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
	text-shadow: 0 0 4px #339;
}

Посмотрите демонстрацию работы размытия ссылок.

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

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Создание вращающихся значков социальных сетей с использованием CSS3
• Использование размытия движения в анимациях CSS3
• Создание сияющих кнопок с использованием CSS