Для размытия содержимого элемента, включая текст, применяется стилевое свойство filter с функцией blur(). Внутри функции указываем степень размытия (например, 5px) — чем больше значение, тем сильнее будет размытие.
div { filter: blur(5px); }
В примере 1 показано размытие текста через filter, а при наведении на текст курсора мыши размытие плавно исчезает.
Пример 1. Использование filter
<!DOCTYPE html>
<html lang="ru">
<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 lang="ru">
<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> для создания рамки. Так что код незначительно сократится по сравнению с первым методом.