9/26 100%

.raz {
text-shadow:
5px -5px 0px #7fdbff,
10px -10px 0px #39cccc,
15px -15px 0px #3d9970,
20px -20px 0px #2ecc40,
25px -25px 0px #01ff70,
30px -30px 0px #ffdc00,
35px -35px 0px #ff851b,
40px -40px 0px #ff4136,
45px -45px 0px #f012be,
50px -50px 0px #b10dc9;
}

.dva {
text-shadow:
0px -5px 0px #7fdbff,
0px -10px 0px #39cccc,
0px -15px 0px #3d9970,
0px -20px 0px #2ecc40,
0px -25px 0px #01ff70,
0px -30px 0px #ffdc00,
0px -35px 0px #ff851b,
0px -40px 0px #ff4136,
0px -45px 0px #f012be,
0px -50px 0px #b10dc9;
}

.tri {
text-shadow:
-5px -5px 0px #7fdbff,
-10px -10px 0px #39cccc,
-15px -15px 0px #3d9970,
-20px -20px 0px #2ecc40,
-25px -25px 0px #01ff70,
-30px -30px 0px #ffdc00,
-35px -35px 0px #ff851b,
-40px -40px 0px #ff4136,
-45px -45px 0px #f012be,
-50px -50px 0px #b10dc9;
}

Не забудьте добавить span с буквами классы.

Можно обойтись псевдоклассами, но если классы вам больше нравятся, то пусть остаются, но только исправьте названия на английском (транслит дурным тоном считается в верстке).

1 лайк

знаю что дурной тон, а можно пример с псевдоклассами? хотя бы для одной буквы :slight_smile:

span:first-child { ... }
Припоминаете такое?

а, понял, не сразу сообразил. вот так получается?
span {
margin-left: 60px;
text-shadow:
0px -5px 0px #7fdbff,
0px -10px 0px #39cccc,
0px -15px 0px #3d9970,
0px -20px 0px #2ecc40,
0px -25px 0px #01ff70,
0px -30px 0px #ffdc00,
0px -35px 0px #ff851b,
0px -40px 0px #ff4136,
0px -45px 0px #f012be,
0px -50px 0px #b10dc9;
}

span:first-child {
margin-left: 0;
text-shadow:
5px -5px 0px #7fdbff,
10px -10px 0px #39cccc,
15px -15px 0px #3d9970,
20px -20px 0px #2ecc40,
25px -25px 0px #01ff70,
30px -30px 0px #ffdc00,
35px -35px 0px #ff851b,
40px -40px 0px #ff4136,
45px -45px 0px #f012be,
50px -50px 0px #b10dc9;
}

span:last-child {
text-shadow:
-5px -5px 0px #7fdbff,
-10px -10px 0px #39cccc,
-15px -15px 0px #3d9970,
-20px -20px 0px #2ecc40,
-25px -25px 0px #01ff70,
-30px -30px 0px #ffdc00,
-35px -35px 0px #ff851b,
-40px -40px 0px #ff4136,
-45px -45px 0px #f012be,
-50px -50px 0px #b10dc9;
}

Для второго span:nth-child(2), а то обделили один получается.

В данном случае второму спану писать класс… ну как-то совсем не логично)

1 лайк

Раз размытие везде нулевое, каким оно является по умолчанию, то его можно не указывать, существенно укорачивая код.

span:first-child{
text-shadow:
5px -5px 0px #7fdbff,
10px -10px 0px #39cccc,
15px -15px 0px #3d9970,
20px -20px 0px #2ecc40,
25px -25px 0px #01ff70,
30px -30px 0px #ffdc00,
35px -35px 0px #ff851b,
40px -40px 0px #ff4136,
45px -45px 0px #f012be,
50px -50px 0px #b10dc9;
}

span:first-child + span {
text-shadow:
0px -5px 0px #7fdbff,
0px -10px 0px #39cccc,
0px -15px 0px #3d9970,
0px -20px 0px #2ecc40,
0px -25px 0px #01ff70,
0px -30px 0px #ffdc00,
0px -35px 0px #ff851b,
0px -40px 0px #ff4136,
0px -45px 0px #f012be,
0px -50px 0px #b10dc9;
}

span:last-child {
text-shadow:
-5px -5px 0px #7fdbff,
-10px -10px 0px #39cccc,
-15px -15px 0px #3d9970,
-20px -20px 0px #2ecc40,
-25px -25px 0px #01ff70,
-30px -30px 0px #ffdc00,
-35px -35px 0px #ff851b,
-40px -40px 0px #ff4136,
-45px -45px 0px #f012be,
-50px -50px 0px #b10dc9;
}