Испытание: зловещие тени [17/17] 100% Решение на псевдо-элементах

Курсы §17. Игра теней
1 
Рабочее решение без применения класса ".help" (на псевдо-элементах)
(кстати так и не понял, почему "inset" в псевдоэлементах у тени работает весьма некорректно)
.btn {
    width: 250px;
    margin: 0 25px;
    margin-top: 100px;
    padding: 15px 0;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: white;
    background: #2c3e50;
    cursor: pointer;
}

.btn {
    box-shadow: inset 0px -5px #16a085,
    0px 20px 0px -10px #2980b9,
    0px 40px 0px -20px #3498db,
    inset 0px 5px #16a085,
    0px -20px 0px -10px #c0392b,
    0px -40px 0px -20px #e74c3c;
}

.btn::after {
    content: "";
    display: block;
    width: 125px;
    height: 5px;
    box-shadow: 125px 15px #2ecc71;
}

.btn::before {
    content: "";
    display: block;
    width: 125px;
    height: 5px;
    box-shadow: 0px -15px #2ecc71;
}
1 лайк
2

По-моему Вы усложнили себе задачу…

.btn {
    /* + весь исходный код */
    box-shadow:
    inset 0 10px 0 -5px #2ecc71,
    inset 0 -10px 0 -5px #2ecc71,
    0 20px 0 -10px #2980b9,
    0 40px 0 -20px #3498db,
    0 -20px 0 -10px #c0392b,
    0 -40px 0 -20px #e74c3c;
}

.help {
    width: 125px;
    height: 5px;
    margin: 0 25px;
    box-shadow:
    125px -60px 0 0 #16a085,
    0 -5px 0 0 #16a085;
}
1 лайк
3

Конечно усложнил. Но в реальности, насколько я понимаю, добавлять лишние классы в html плохо. И не грех, имхо, усложнить код. Тем более в html (имхо) самое главное - это семантика (особенно важна слепым например), а семантически, я читал, все эти дивы - не подходят.

4

Ну, реальность и обучение немного разные вещи. :blush: Мне было интересно решить так - как старая театральная поговорка: “Если на сцене висит ружье, значит оно должно выстрелить” - если есть элемент, им нужно воспользоваться. Впрочем, и Ваш подход интересен.

1 лайк