Как размыть текст?

Для размытия содержимого элемента, включая текст, применяется стилевое свойство filter с функцией blur(). Внутри функции указываем степень размытия (например, 5px) — чем больше значение, тем сильнее будет размытие.

div { filter: blur(5px); }

В примере 1 показано размытие текста через filter, а при наведении на текст курсора мыши размытие плавно исчезает.

Пример 1. Использование filter

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размытие текста</title> <style> .spoiler { border: 1px solid #ccc; /* Параметры рамки */ padding: 1em; /* Поля вокруг текста */ } .blur { filter: blur(4px); /* Размытие */ transition: 0.5s; /* Время перехода */ } .blur:hover { filter: blur(0); /* Убираем размытие при наведении */ } </style> </head> <body> <p>Для просмотра спойлера наведите на него курсор.</p> <div class="spoiler"> <div class="blur"> В фильме «Освободите Вилли» косатку Вилли в конце освобождают. </div> </div> </body> </html>

Поскольку свойство filter воздействует на всё содержимое элемента, включая рамку, её пришлось добавить к элементу с классом .spoiler. В таком случае рамка остаётся за пределами элемента с классом .blur, к которому и применяется размытие.

Ещё один способ размытия текста — это использование свойства text-shadow, добавляющее к тексту тень. В параметрах свойства можно регулировать степень размытия тени (здесь это третий параметр), добиваясь нужного эффекта.

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

Поскольку тень располагается за текстом, сам текст не меняется при наложении тени и сохраняет свою читаемость. Поэтому текст следует спрятать, задав ему прозрачный цвет через значение transparent.

Воспользуемся вышеприведённым примером со спойлером, но вместо свойства filter используем text-shadow (пример 2).

Пример 2. Использование text-shadow

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размытие текста</title> <style> .spoiler { border: 1px solid #ccc; padding: 1em; text-shadow: 0 0 5px #000; color: transparent; transition: 0.5s; } .spoiler:hover { text-shadow: none; color: currentColor; } </style> </head> <body> <p>Для просмотра спойлера наведите на него курсор.</p> <div class="spoiler"> В фильме «Освободите Вилли» косатку Вилли в конце освобождают. </div> </body> </html>

Поскольку свойство text-shadow воздействует только на текст, нам уже не потребуется дополнительный <div> для создания рамки. Так что код незначительно сократится по сравнению с первым методом.