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

vnlucky · 13.Март.2015 08:43:32

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

.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;
}

kakaslav · 29.Июнь.2015 18:23:17

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

.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;
}

Chinck · 01.Январь.2016 14:40:42

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

virgus1970 · 14.Январь.2016 07:29:21

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

kolos · 20.Январь.2016 21:55:31

с начала не увидел .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;
}

kinivi · 05.Апрель.2016 13:58:24

Как мне кажется там нужно было просто использовать класс .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;
        
    }

terra-kot · 25.Апрель.2016 12:05:20

Насколько я понял задачу - необходимо было отработать тенями. 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;

}

sergey.fomenko · 27.Апрель.2016 20:35:07

Насколько корректно такое решение?

.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;
}

Ineska · 28.Апрель.2016 08:20:47

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

Aleksey_Fers · 17.Май.2016 17:52:46

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теней

Dmitry_S · 23.Май.2016 15:54:27

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

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

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%);}

Ineska · 23.Май.2016 15:58:15

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

Aleksey_Fers · 23.Май.2016 17:06:45

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

Ineska · 23.Май.2016 17:10:04

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

Aleksey_Fers · 23.Май.2016 17:25:57

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

Ineska · 23.Май.2016 17:48:02

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

Aleksey_Fers · 23.Май.2016 17:48:32

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

Ineska · 23.Май.2016 17:51:56

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

Aleksey_Fers · 23.Май.2016 17:53:34

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

Ineska · 23.Май.2016 18:00:48

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