Действительно странно, у меня все в порядке…
Причем копируешь, все отлично, сам прописываешь аналогичное, криво.Я удивился)
А можете наглядно продемонстрировать кривой вариант? Не могу представить, в чем может быть дело… Разве что пока все тени не напишешь, то изображение скачет.
Уже не могу, ее нету, а было что контейнер .btn увеличивался по высоте
Намного? Или только на высоту теней?
на высоту :after и :before
А, так это логично и правильно в принципе, последние же тени внутренние.
ну дак position то absolute значит он не должен никак влиять на ширину контейнера правильно?
Правильно. Просто накладывается сверху, тем самым уменьшая видимую темно-синюю область по высоте.
Вот в этом то и была непонятка, то что происходило противоречило тому что было написано.
Ладно. В любом случае проблему уже не воссоздать.
Глюк системы:grinning:
1 лайк
Классный вариант с градиентами, дойдя до изучения данной темы сразу пошел попробовать на этом испытании ваш вариант, он мне понравился больше других.
Все гениальное просто! Спасибо, за это решение. Псевдоэлементы вообще не нравятся
Добрый день, я решил вот так:
.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;
}Как вариант, без “хелпа” и оригинальности.
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;
}
1 лайк
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;
}
По сути, сделал то же самое, но с применением бэкграунда. И псевдо оказались лишними, и вспомогательный див.
5 лайков
Очень хитро ))) А если фон под кнопкой поменяется. ))
Добрый день! Решил сегодня повторить некоторые разделы. И при выполнении итогового испытания по теням решил использовать блок .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;
}
Странно. Должно работать. Кстати, на другие виды трансформаций проверка тоже не реагирует.