Сделать текст размытым с помощью простого CSS кода не так уж и сложно. Весь трюк заключается в свойстве text-shadow и использовании свойства transition, делающее плавную анимацию размытого текста. В этом примере используются две тени (одна из которых сдвигается вниз и вправо, а другая влево и вверх), разделяя их запятой. Кроме того, цвет текста должен быть таким же, как и цвет шрифта, чтобы текст выглядел размытым. Иначе он будет выглядеть как тень.
Давайте посмотрим код.
HTML:
<div>Wow! I got blurred. =)</div>
CSS:
div {
margin: 10px;
}
span {
color: black;
text-shadow: 1px 1px 3px black, -1px -1px 3px black;
font-size: 40px;
font-family: Arial;
/* Transitions */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
span:hover {
color: black;
text-shadow: none;
}
Не поддерживаются браузеры:
- Internet Explorer 8.0 и ниже.
- Opera Mini 6.0 и ниже.
Мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition, animation, linear-gradient и т.п. — уже не нужен.
Источник