.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 с буквами классы.
Ineska
12.Декабрь.2016 12:41:40
2
Можно обойтись псевдоклассами, но если классы вам больше нравятся, то пусть остаются, но только исправьте названия на английском (транслит дурным тоном считается в верстке).
1 лайк
знаю что дурной тон, а можно пример с псевдоклассами? хотя бы для одной буквы
Ineska
12.Декабрь.2016 12:57:12
4
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 ;
}
Ineska
12.Декабрь.2016 13:04:20
6
Для второго 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 ;
}