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

Почитал комментарии под заданием: его явно можно выполнить очень разными способами. Кто-то утверждает, что вообще не использовал div.help, например. А кто-то умудряется применять .btn:after. Хотелось бы увидеть примеры кода без использования второго дива. Киньте кто-нибудь, хочется посмотреть на реализацию. Дело в том, что моё решение мне кажется «не совсем стандартным», что ли, думаю, что то же самое можно сделать и проще. Если не трудно, посмотрите, насколько оно корректно. К решению подошёл так: сначала задал для первого div 6 теней: обе красные, обе синие и тень цвета #16a085 в обе стороны от блока по вертикали. А дальше тупо при помощи position:absolute и задания размеров разместил div.help в нужном месте, и уже от него отбросил две недостающих светло-зелёных тени. Под конец пришлось ещё с отступами поиграться, чтоб на 100% натянуть (а наверняка ведь есть примеры решения без изменения начальных стилей).

1 лайк

В общем-то нормально, но можно упростить, не позиционируя вспомогательный блок абсолютно: для .btn задать 4 тени, и для .help — 4 тени. Вместо вспомогательного блока можно вполне сделать псевдоэлемент.

1 лайк

Прошёл испытание заново, там оказывается можно сделать вообще всё просто: без позиционирования и псевдоэлементов. Для div.help тоже используется только две тени.
При первом решении не разглядел, что некоторые тени там нужно задать как inset, и тогда можно будет не менять размер начального блока. То есть просто напутал с размерами.

2 лайка

можно сделать совсем просто :slight_smile:

.btn {
width:250px;
padding:15px 0;
margin:0 25px;
margin-top:105px;
line-height:20px;
text-align:center;
text-transform:uppercase;
cursor:pointer;
color:white;
background:#2c3e50;
box-shadow:
-230px 25px 0 -20px #ecf0f1,
-105px 25px 0 -20px #16a085,
20px 25px 0 -20px #2ecc71,
230px -25px 0 -20px #ecf0f1,
105px -25px 0 -20px #16a085,
-20px -25px 0 -20px #2ecc71,
0 25px 0 -10px #2980b9,
0 45px 0 -20px #3498db,
0 -25px 0 -10px #c0392b,
0 -45px 0 -20px #e74c3c;
}
6 лайков

Сделал с помощью хелпа. Не могу понять почему хелп свободно размещается на кнопке «Поехали!», они же оба блоки, никакого позиционирования нет, вроде должны отталкиваться. Или я что-то перепутал?

.btn{
    box-shadow: inset 0 5px 0 0 #16a085,
                inset 0 -5px 0 0 #16a085,
                0 -20px 0 -10px #c0392b,
                0 -40px 0 -20px #e74c3c,
                0 20px 0 -10px #2980b9,
                0 40px 0 -20px #3498db;
}
.help {
    width: 125px;
    height: 5px;
    background-color: #2ecc71;
    margin-left: 25px;
    margin-top: -60px;
    box-shadow: 125px 55px 0 0 #2ecc71;
}
1 лайк

Использовал 6 теней на кнопке (2 внутренних). Одну внутреннюю перекрыл вспомогательным дивом, вторую тенью от него.

1 лайк

Сделал на чистом CSS. Спасибо vnlucky за подсказку как уменьшить размеры кнопок с помощью внутренних отступов. :smile:
У меня получилось на одну тень меньше: всего 9 штук использовал

с начала не увидел .help )

box-shadow:
inset 125px -135px 0px -130px #16a085,
inset 0 -55px 0 0 #2c3e50,
inset -125px -55px 0 0px #16a085,
inset 125px -55px 0 0px #2ecc71,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}
.help {
width: 125px;
height: 5px;
background-color: #2ecc71;
position: relative;
top: -5.5px;
left: 150px;
}

Как мне кажется там нужно было просто использовать класс .help.

.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;
        cursor: pointer;
        background: #2c3e50;
        box-shadow:
        
        
        inset 0 -5px 0 0 #16a085,
        inset 0 5px 0 0 #16a085,
    
       
        
        0 -20px 0 -10px #c0392b,
        0 -40px 0 -20px #e74c3c,
        0 20px 0 -10px #2980b9,
        0 40px 0 -20px #3498db;
        
    }
    .help{
        position:absolute;
        width:125px;
        height:5px;
        
        left:25px;
        box-shadow:
        125px -5px 0 0 #2ecc71,
        0 -60px 0 0 #2ecc71;
        
    }

Насколько я понял задачу - необходимо было отработать тенями. Position: absolute тут ни к чему. Задал размеры класса .help и от него уже расставил тени внутри блока .btn.

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

}
.help {
width: 125px;
height: 5px;
box-shadow:
150px -60px 0 0 #16a085,
25px -5px 0 0 #16a085,
25px -60px 0 0 #2ecc71,
150px -5px 0 0 #2ecc71;

}

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;
    cursor: pointer;
    background: #2c3e50;
    box-shadow:
    0 20px 0 -10px #2980b9,
    0 40px 0 -20px #3498db,
    0 -20px 0 -10px #c0392b,
    0 -40px 0 -20px #e74c3c,
    inset 0 5px 0 0 #16a085,
    inset 0 -5px 0 #2ecc71;
}

.btn::before {
    position: absolute;
    content: "";
    display: block;
    height: 5px;
    width: 125px;
    background-color: #2ecc71;
    top: 0;
    left: 0;
}

.btn::after {
    position: absolute;
    content: "";
    display: block;
    height: 5px;
    width: 125px;
    background-color: #16a085;
    top: 55px;
    left: 0;
}
6 лайков

Неплохой вариант по-моему. Достаточно оригинальный, и без использования .help

1 лайк

html, body {
width: 300px;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 18px;
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;
cursor: pointer;
background: #2c3e50;
box-shadow:
inset 0 5px 0 0 #16a085,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
inset 0 -5px 0 0 #2ecc71,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c;
}
.help{
position:relative;
top:-60px;
left:25px;
width: 125px;
height:60px;
box-shadow:inset 0 5px 0 0 #2ecc71,
inset 0 -5px 0 0 #16a085;
}

все просто, с позиционировал блок задал высоту аналогичную кнопке, итог 8теней

1 лайк

Добавлю, пожалуй, свой вариант, наиболее элегантный, на мой взгляд. Может кому понравится.
За основу взял идею sergey.fomenko с псевдоэлементами .btn::before и .btn::after

  1. В .btn добавляем только 4 внешних тени и position:relative (для псевдоэлементов)
  2. Псевдоэлемент ::before задаём ширину-высоту, делаем absolut, с пустым content, позицией top:0 left:0 (bottom:0 для ::after)
  3. Забегаем на следующий курс и в псевдоэлементы добавляем линейный градиент на два цвета без перехода. Не забываем поменять порядок цветов для второго псевдоэлемента.

background: linear-gradient(угол наклона, цвет | покрытие)

Кусок CSS кода:

box-shadow:
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;}

.btn::before {
content: “”;
position: absolute;
width: 100%;
height: 5px;
left: 0;
top: 0;
background: linear-gradient(90deg, #2ecc71 50%, #16a085 50%);}

.btn::after {
content: “”;
position: absolute;
width: 100%;
height: 5px;
left: 0;
bottom: 0;
background: linear-gradient(-90deg, #2ecc71 50%, #16a085 50%);}

4 лайка

Прекрасный вариант. Мне очень нравится)

пробовал этим вариантом получилось подобно сделать только с 3 раза, странно как то работает строка кода, то изменила мне ширину .btn то вообще не отображала элемент, получилось только после написания кода абсолютно с нуля.

Какая именно строка кода странная?

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

А что за редактор, если не секрет?

htmlacademy редактор непосредственно в задании