Размытый текст с помощью CSS

Сделать текст размытым с помощью простого 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 и т.п. — уже не нужен.
Источник