Размытый текст
Сделать текст размытым с помощью простого CSS кода не так уж и сложно. Весь трюк заключается в свойстве text-shadow и использовании свойства transition, делающее плавную анимацию размытого текста. В этом примере используются две тени (одна из которых сдвигается вниз и вправо, а другая влево и вверх), разделяя их запятой. Кроме того, цвет текста должен быть таким же, как и цвет шрифта, чтобы текст выглядел размытым. Иначе он будет выглядеть как тень.
Давайте посмотрим код.
HTML:
<div>
<span>Wow! I got blurred. =)</span>
</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 и ниже.
Перевод статьи "Blurry text" с сайта "cssdeck.com, автор CSS Creations.
Мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition, animation, linear-gradient и т.п. — уже не нужен.
P.S. Это тоже может быть интересно:
У меня для вас новость — есть сделать color:transparent будет намного лицеприятнее.
а еще про кошерный (-webkit-)filter:blur(); не упомнянули.
и про blur из MS фильтров.
Ми ми ми на вас :(
Даже в 2019 этот способ оптимальнее filter: blur(x), тестировал на одном предложении, Опера, боюсь представить как начинала тормозить страница в 2012.
http://result.dabblet.com/gist/3844687/bdf48302fbd39a5bc0e866d64b1c14d4c81cdeb6 например
http://result.dabblet.com/gist/3844689/a90576ad9a2191c52b742d8f0f6b18b764532bba
примеры с -ms-filter делать лень
Имхо, трюк с :transparent тоже имеет свои минусы. Без тени и текста не будет видно.
Но вот с фильтром пример понравился, но опять же, webkit-онли.
А почему бы нам не сделать текст в стандартном состоянии обычным, а при наведении добавлять тень и transparent.
Хех, у нас даже радиус тени совпал. Чесслово, не списывал xD
А вот отступы там ни к чему.
Даа ладноо вам, всё равно и то и то — костыли) Для этих целей нужны нацеленные вещи, тобиш фильтры:)
Так фильтры весь блок размоют, в итоге нужны фильтры для текста.
Когда фон задан это заметно.
Старо и банальненько.
Интреснее так:
div {
margin: 10px;
}
span {
color: transparent;
text-shadow: 0 0 10px 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 {
text-shadow: 0 0 0 black;
}