Текстовая тень в CSS является очень полезным и важным свойством, помогающая сделать ваш текст привлекательным. Просто одно свойство, но вы можете использовать его по-разному, вот несколько примеров для вас, чтобы сделать в заголовках текст, основанный на использовании CSS.
Есть два способа, чтобы сделать тени (не для IE браузеров), задавая простые параметры тени и размытия, а так же, если вы хотите, параметры Альфа-канала. тени. Internet Explorer, имеет другой синтаксис, требует другие параметры:
Например:
.StunningmeshDirect {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
/* In Internet Explorer */
filter: Shadow(Color=#ffffff, Direction=135, Strength=0);
text-shadow: 2px 2px 0px #fff;
}
Вы получите следующий результат:
Если вы хотите изменить свойство альфа тени, то здесь синтаксис:
.StunningmeshRGBA {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
/* In Internet Explorer */
filter: Shadow(Color=#dddddd, Direction=135, Strength=0);
text-shadow: 2px 2px 0 rgba(255,255,255,0.5)
}
Вы получите следующий результат:
Итак, используя эти методы можно получить разнообразные эффекты.
Эффект двойной тени:
.StunningmeshStyle1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 2px 2px 0px #000, 3px 3px 0px #ddd;
}
Вы получите следующий результат:
Эффект неоновой тени:
.StunningmeshStyle2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff9600, 0 0 40px #ff9600, 0 0 50px #ff9600, 0 0 75px #ff9600;
}
Вы получите следующий результат:
Эффект внешней тени:
.StunningmeshStyle3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 0px 1px 2px #777;
}
Вы получите следующий результат:
Эффект огненной тени:
.StunningmeshStyle4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFF;
text-shadow: 0 0 10px #fefcc9, 5px -5px 15px #feec85, -10px -10px 20px #ffea34, 10px -20px 25px #ec310c, -10px -30px 30px #ca0000, 0 -40px 35px #850000, 5px -45px 40px #590101;
}
Вы получите следующий результат:
Эффект сдвинутой тени:
.StunningmeshStyle5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 1px 1px 0 #ffdd00, 2px 2px 0 #ffcb05, 3px 3px 0 #fdb913, 4px 4px 0 #faa61a, 5px 5px 0 #f7941d, 6px 6px 0 #f58220, 7px 7px 0 #f37021, 8px 8px 0 #f15a22, 9px 9px 0 #ef4123;
}
Вы получите следующий результат:
