Испытание: зловещие тени. Все ли верно?

Курсы §17. Игра теней
1

.btn {
position: relative;
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
box-shadow: inset 0 5px #16a085,
inset 0 -5px #2ecc71,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c;

}

.btn::before {
position: absolute;
left: 0;
top: 0;
content: “”;
width: 50%;
height: 100%;
box-shadow: inset 0 -5px #16a085,
inset 0 5px #2ecc71;
}

2

Да, всё правильно.

3

Подскажите, пожалуйста насколько такое решение задачи является ошибочным? Кажется, у меня проблемы с псевдоэлементами потому как нагромоздила такое хотя могла прибегнуть к ::before/ ::after.

 html,
 body {
    width: 300px;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: "Arial", sans-serif;
    background: #ecf0f1;
}

 .btn {
    width: 250px;
    margin: 0 25px;
    margin-top: 100px;
    padding: 20px 0;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: white;
    background: #2c3e50;
    cursor: pointer;
    box-shadow:
            inset 0 -5px 0 0 #2ecc71,
            inset 0 5px 0 0 #16a085,
            0 -20px 0 -10px #c0392b,
            0 20px 0 -10px #2980b9,
            0 -40px 0 -20px #e74c3c,
            0 40px 0 -20px #3498db;
}

.help {
    width: 125px;
    height: 50px;
    margin: -55px 25px;
    background: #2c3e50;
    box-shadow: 0 -5px 0 0 #2ecc71,
                0 5px 0 0 #16a085;
}
4

Вы воспользовались дополнительным блоком .help. Так тоже можно. Но будет лучше воспользоваться позиционированием, чтобы не писать отрицательные отступы.

1 лайк