Очередной CSS сниппет позволяющий создать размытый текст (blurry text). Добавим немного анимаций при наведении на текст для того чтобы размытый текст плавно переходил в четкую типографию.
Код:
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.
Опубликовано
Подробнее