Совсем недано я подумал, а не красиво ли будет, если при наведении на ссылку её тень будет плавно появляться и так же плавно исчезать? Да, оказывается так сделать можно, порылся в java скриптах, но ничего так и не придумал, но вскоре в одном блоге наткнулся на свойство CSS transition-duration, которое указывает какое количество времени занимает анимированный переход.
Я его и раньше использовал, но для текста нет.
давайте я вам поведаю, как это сделать для названий материалов.
Во-первых, нам нужно описать плавное появление, а потом на плавное исчезание. Код с объяснением
Описываем появление при наведении:
Code
.eTitle a:hover {color: #000000;text-shadow: 0px 0px 9px rgba(255,0,0,0.9);//первые 0px смещение, второе 9px размер тени, 255,0,0, - цвет тени, 0.9 - прозрачность тени
-webkit-transition-duration: 2s;//время анимации
-moz-transition-duration: 2s;//для мозилы
-o-transition-duration: 2s;//для оперы
transition-duration: 2s;//все остальные
}
И исчезание:
Code
.eTitle a {color: #414855;
text-shadow: 0px 0px 0px rgba(255,255,255,1);
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;}
Плавная анимация может не тработать на некоторых браузерах и IE, появляется сразу!!!
Кому интересно, вот скриншот. Анимация, дождитесь полной загрузки. 1.2 мб
