Эффект размытия текста при наведении

Код делает текст размытым при наведении курсора, я получил этот эффект благодаря тени, созданные при помощи теней свойства CSS3.
Да вся магия в третим параметре text-shadow: 0px 0px 10px #FF33FF,

CSS

Этот код вставляем в свой  CSS документ

Code
.blur{
  display: block;  
  text-decoration: none;
  font: 100px Georgia, sans-serif;
  letter-spacing: -5px;  
  text-align: center;  
  color: transparent;  
  text-shadow: 0px 0px 1px #FF33FF;
}

.blur:hover{
  text-shadow: 0px 0px 10px #FF33FF;
}


HTML

Этот код вставляем туда где хотим видеть ссылки с эффектом

Code
<a href="#" class="blur">Pure CSS3 ( Hover me )</a>

  • FalleN

  • 2306

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!