Оформление текста, часть 2 / Испытание: психоделическая тень 9/26

Курсы §25. Оформление текста с помощью CSS. Часть 2
1

96%

/*
Используемые цвета:

#7fdbff, #39cccc, #3d9970, #2ecc40, #01ff70, #ffdc00, #ff851b, 
#ff4136, #f012be, #b10dc9

*/

html,
body {
min-width: 570px;
margin: 0;
font-size: 200px;
font-family: “Arial”, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #111111;
}

p {
padding-top: 60px;
margin: 0px;
margin-left: 20px;
text-align: center;
display: inline-block;
}

span {
margin-right: 60px;
}
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:nth-child(2){
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;
}

2

Это правило было написано изначально, когда вы загрузили страницу с заданием:
span:first-child {
margin-left: 0;
}
А здесь было left:
span {
margin-left: 60px;
}
А зачем для параграфа задано display: inline-block; - вообще загадка.
p {
padding-top: 60px;
margin: 0px;
/margin-left: 20px;/
text-align: center;
/display: inline-block;/
}
Поэтому 96%.

3

Создал в спанах дополнительные классы получилось на 100%
< p>
< span class=“t1”>C< /span>< span class=“t2”>S< /span>< span class=“t3”>S< /span>
< /p>

html,
body {
min-width: 570px;
margin: 0;
font-size: 200px;
font-family: “Arial”, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #111111;
}

p {
margin: 0;
padding-top: 60px;
text-align: center;
}

span {
margin-left: 60px;
}

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

4

Вот мое 100% решение. Как мне кажется очень лаконичное.
html,
body {
min-width: 570px;
margin: 0;
font-size: 200px;
font-family: “Arial”, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #111111;
}

p {
margin: 0;
padding-top: 60px;
text-align: center;
}
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;
}

5

Скажите пожалуйста, а почему в задании при
span:first-child {
margin-left: 0;
}

первая буква всё равно отстоит от левой границы абзаца на 30 пикселей? То есть первая буква приближается к границе только при
margin-left: -30px.
А! Уже понимаю. Кажется.
Это работает из-за того, что у абзаца есть text-align: center;
Хотя зазор между буквой и границей абзаца в 10px всё равно есть.

6

100%

/* Используемые цвета:

#7fdbff, #39cccc, #3d9970, #2ecc40, #01ff70, #ffdc00, #ff851b,
#ff4136, #f012be, #b10dc9
/
/
Используемые цвета:

#7fdbff, #39cccc, #3d9970, #2ecc40, #01ff70, #ffdc00, #ff851b, 
#ff4136, #f012be, #b10dc9

*/

html,
body {
min-width: 570px;
margin: 0;
font-size: 200px;
font-family: “Arial”, sans-serif;
font-weight: bold;
color: #ffffff;
background-color: #111111;
}

p {
margin: 0;
padding-top: 60px;
text-align: center;
}

span {
margin-left: 60px;
}

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:nth-child(2) {
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;
}

7

можно ли для общего спана задать тени для трех букв, а затем только сдвинуть боковые?