Испытание: why so serious? Всё идеально, почему 99%?

Курсы §25. Оформление текста с помощью CSS. Часть 2
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: why so serious?</title>
        <meta charset="utf-8">
    </head>
    <body>
        <span>&#9786;</span>
        <p>Why so serious?</p>
    </body>
</html>

/*
    Цвета смайликов: #f4c300, #009f3d, #0085c7, #df0024
    Цвета текста: rgba(255, 0, 180, 0.5), rgba(0, 168, 255, 0.5)
*/

html, 
body {
    min-width: 570px;
    margin: 0;
    font-family: "Arial", sans-serif;
    color: #000000;
}

p {
    margin: 0;
    padding-top: 230px;
    text-align: center;
    font-weight: bold;
    font-size: 65px;
    letter-spacing: -5px;
    word-spacing: 5px;
    text-transform: uppercase;
    color: rgba(0, 168, 255, 0.5);
    text-shadow: 5px 5px 0 rgba(255, 0, 180, 0.5);
}

span {
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -0.5em;
    font-size: 200px;
    line-height: 1em;
    text-shadow: 
        70px 80px 0 #009f3d,
        -70px 80px 0 #f4c300,
        140px 0 0 #df0024,
        -140px 0 0 #0085c7,
        70px 80px 0 #009f3d,
        -70px 80px 0 #f4c300;
}
2

Давайте посмотрим скрин с различиями.

3

А зачем у Вас столько теней?

4

Чтобы отобразить остальные смайлики. Они - это смещенная тень.

5

ра.png611×791 72.1 KB

6

Ну, хорошо: у Вас, в изначальном условии, дан смайлик - черный. Остальные, как Вы говорите, - это его смещённые тени. Но их всего 4. А у Вас почему-то теней перечислено в text-shadow аж 6. Что должны отобразить последние 2?

7

Да, вы правы, я немного перемудрил и сам ответил на свой вопрос. Видимо когда я менял порядок теней, чтобы разместить их за и над другими тенями, я по ошибке накопировал лишнее, поэтому у меня и показывало дубликаты.

    Вот верный код:
text-shadow: 
    -70px 80px 0 #f4c300,
     70px 80px 0 #009f3d,
    -140px 0 0 #0085c7,
    140px 0 0 #df0024;

}

1 лайк