Способы выполнить итоговое испытание


#21

Действительно странно, у меня все в порядке…


#22

Причем копируешь, все отлично, сам прописываешь аналогичное, криво.Я удивился)


#23

А можете наглядно продемонстрировать кривой вариант? Не могу представить, в чем может быть дело… Разве что пока все тени не напишешь, то изображение скачет.


#24

Уже не могу, ее нету, а было что контейнер .btn увеличивался по высоте


#25

Намного? Или только на высоту теней?


#26

на высоту :after и :before


#27

А, так это логично и правильно в принципе, последние же тени внутренние.


#28

ну дак position то absolute значит он не должен никак влиять на ширину контейнера правильно?


#29

Правильно. Просто накладывается сверху, тем самым уменьшая видимую темно-синюю область по высоте.


#30

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


#31

Ладно. В любом случае проблему уже не воссоздать.


#32

Глюк системы:grinning:


#33

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


#34

Все гениальное просто! Спасибо, за это решение. Псевдоэлементы вообще не нравятся


#35

Добрый день, я решил вот так:

.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 0px 50px 0 -45px #2ecc71,
        inset 0px -50px 0 -45px #16a085,
        0 20px 0 -10px #2980b9,
        0 40px 0 -20px #3498db,
        0 -20px 0 -10px #c0392b,
        0 -40px 0 -20px #e74c3c;
}

.help {
    width: 125px;
    height: 50px;
    background: transparent;
    position: relative;
    top: -55px;
    left: 150px;
    box-shadow: 0 5px 0 0 #2ecc71,
    0 -5px 0 0 #16a085; 
}

#36

Как вариант, без “хелпа” и оригинальности.

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: 0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
inset 0 5px 0 0px #16a085,
inset 0 -5px 0 0 #2ecc71;
}
.btn:before {
position: absolute;
content: “”;
display: block;
top: 100px;
height: 60px;
width: 125px;
box-shadow: inset 0 -5px 0 0px #16a085,
inset 0 5px 0 0 #2ecc71;
}


#37
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;
background-image:
linear-gradient(to left, #16a085 50%, #2ecc71 50%),
linear-gradient(to right, #16a085 50%, #2ecc71 50%);
background-size: 100% 5px;
background-position: 0 0, 0 55px;
background-repeat: no-repeat;
cursor: pointer;
box-shadow:
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}

По сути, сделал то же самое, но с применением бэкграунда. И псевдо оказались лишними, и вспомогательный див.


#38

Очень хитро ))) А если фон под кнопкой поменяется. ))


#39

Добрый день! Решил сегодня повторить некоторые разделы. И при выполнении итогового испытания по теням решил использовать блок .help с тенью, но сместить его с помощью transform: translate()! В окне результата всё отлично получилось, а вот проверка пишет 96% и “не видит” этой трансформации. В чём дело? Или для движения блоков нельзя использовать 2-мерные трансформации?
.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 #2ecc71,
inset 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;
background: #16a085;
transform: translate(25px, -5px);
box-shadow: 125px -55px #16a085;
}


#40

Странно. Должно работать. Кстати, на другие виды трансформаций проверка тоже не реагирует.