Очередной CSS сниппет позволяющий создать размытый текст (blurry text). Добавим немного анимаций при наведении на текст для того чтобы размытый текст плавно переходил в четкую типографию.

размытие текста на css

Код:

h2 {
	color: transparent;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	font-size: 62px;
	-webkit-transition: text-shadow 2.0 ease-out;
	-moz-transition: text-shadow 2.0 ease-out;
	-ms-transition: text-shadow 2.0 ease-out;
	-o-transition: text-shadow 2.0 ease-out;
	transition: text-shadow 2.0 ease-out;
}

h2:hover {
	text-shadow: 0 0 0 rgba(0, 0, 0, 1);
	-webkit-transition: text-shadow 0.5s;
	-moz-transition: text-shadow 0.5s;
	-ms-transition: text-shadow 0.5s;
	-o-transition: text-shadow 0.5s;
	transition: text-shadow 0.5s;
	cursor: default;
}

Демо:

See the Pen Blurry Text by 4gray (@4gray) on CodePen

Опубликовано

Похожие записи

Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo