Применение CSS3-свойства "text-shadow" и эффекты с ним
Данные примеры не будут корректно работать в браузере Internet Explorer, т.к. даже последняя на данный момент, 9-я версия IE не поддерживает CSS-свойство text-shadow
Пример 1
Я простой пример text-shadow
#text1{
...
text-shadow:0px 0px 12px black;
...
}
Пример 2
Наведи мышку на меня!
#text2{
...
top: 0%;
left: 0%;
text-shadow:10px 10px 20px black;
-webkit-transition: 300ms linear 0s;
-moz-transition: 300ms linear 0s;
-o-transition: 300ms linear 0s;
transition: 300ms linear 0s;
}
#text2:hover {
left: 1%;
text-shadow:3px 3px 5px black;
}
Пример 3
И на меня наведи мышку!
#text3{
...
-webkit-transition: 300ms linear 0s;
-moz-transition: 300ms linear 0s;
-o-transition: 300ms linear 0s;
transition: 300ms linear 0s;
}
#text3:hover{
color: rgba(150,150,150, 0);
text-shadow:0px 0px 35px black;
}
Пример 4
А я свечусь под мышкой!
#text4{
width: 500px;
position: absolute;
background-color: darkblue;
-webkit-transition: 300ms linear 0s;
-moz-transition: 300ms linear 0s;
-o-transition: 300ms linear 0s;
transition: 300ms linear 0s;
}
#text4:hover {
text-shadow:0px 0px 15px #3399ff, 0px 0px 35px #99ffff;
}
Пример 5
Проведи по мне мышкой!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" >
$('#text5').lettering();
</script>
=======================Стили==============================================
#text5 span{
-webkit-transition: 100ms linear 0s;
-moz-transition: 100ms linear 0s;
-o-transition: 100ms linear 0s;
transition: 100ms linear 0s;
}
#text5 span:hover{
color: rgba(102,204,255, 0);
text-shadow:0px 0px 35px #3399ff;
}