Как размыть текст?
Для размытия содержимого элемента, включая текст, применяется стилевое свойство 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> для создания рамки. Так что код незначительно сократится по сравнению с первым методом.
Автор: Влад Мержевич
Источник: webref.ru