Тень текста в CSS

Текстовая тень в 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;
}

Вы получите следующий результат:

Оригинал / Перевод