CSS-live.ru

Размытый текст

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

9 комментариев

  1. У меня для вас новость — есть сделать color:transparent будет намного лицеприятнее.
    а еще про кошерный (-webkit-)filter:blur(); не упомнянули.
    и про blur из MS фильтров. 
     
    Ми ми ми на вас :(

    1. Даже в 2019 этот способ оптимальнее filter: blur(x), тестировал на одном предложении, Опера, боюсь представить как начинала тормозить страница в 2012.

    1. Имхо, трюк с :transparent тоже имеет свои минусы. Без тени и текста не будет видно. 

      Но вот с фильтром пример понравился, но опять же, webkit-онли. 

      1. А почему бы нам не сделать текст в стандартном состоянии обычным, а при наведении добавлять тень и transparent.

  2. Старо и банальненько.
    Интреснее так:
    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;
    }

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.