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

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

6 Комментарии

  1. SilentImp

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

    1. psywalker (Автор записи)

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

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

    2. Anton Diaz

      Хех, у нас даже радиус тени совпал. Чесслово, не списывал xD
      А вот отступы там ни к чему.

      1. psywalker (Автор записи)

        Даа ладноо вам, всё равно и то и то — костыли) Для этих целей нужны нацеленные вещи, тобиш фильтры:)

  2. Anton Diaz

    Старо и банальненько.
    Интреснее так:
    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 не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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