[17/17] Испытание: зловещие тени. 100% /*Прошу критики*/


#1

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

HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: зловещие тени</title>
    </head>
    <body>
        <div class="btn">Поехали!</div>
        <div class="help"></div>
    </body>
</html>

CSS:

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:
        inset 0 5px 0 0 #2ecc71,
        inset 0 -5px 0 0 #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;
    margin: -5px 25px;
    box-shadow: 125px -55px 0 0 #16a085;
}


#2

Вариант с позиционированием был бы лучше, я думаю.


#3

Мой Вариант с позиционированием ) :slight_smile:

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

.btn{
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 0 #2ecc71,
inset 0 5px 0 0 #2ecc71;
}

.help{
width: 125px;
height: 5px;
position: relative;
background-color: #16a085;
top: -5px;
right: -25px;
box-shadow: 125px -55px 0 0 #16a085;

}


#4

кто использовал флоуты? Благодаря им внутреняя тень не разваливается при расширении кнопки и сужении( до определенного размера). При этом не приходится использовать градиент. Правд при градиенте кнопка даже при сильном сужении не разваливается.

See the Pen Зловещие тени, ужасающе громадная кнопка by Sergey (@muzimka) on CodePen.


#5

Что-то ширина body у вас получилась меньше ширины самой кнопки…


#6

можете поставить любую ширину ) работает от 179px, если меньше то надо джава скриптом корректировать.


#7

body скорее всего было задано и я его не менял =)
Тенденция то правильная? именно с полутенями


#9

я сделал как-то так


html,
body {
width: 300px;
margin: 0;
padding: 0;
font-size: 18px;
font-family: “Arial”, sans-serif;
background: #ecf0f1;
}
.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;
background: #2c3e50;
cursor: pointer;
box-shadow:
inset 0px 5px 0 0px #2ecc71,
inset 0px -5px 0 0 #16a085,
0px -20px 0 -10px #c0392b,
0px -40px 0 -20px #e74c3c,
0px 20px 0 -10px #2980b9,
0px 40px 0 -20px #3498db;
}
.btn::before{
content:"";
position:absolute;
top:0;
right:0;
width:50%;
height:100%;
box-shadow:
inset 0px -5px 0 0px #2ecc71,
inset 0px 5px 0 0 #16a085;
}


#10

Мое решение:

html,
body {
    width: 300px;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: "Arial", sans-serif;
    background: #ecf0f1;
}

.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;
    background: #2c3e50;
    cursor: pointer;
    box-shadow:
        inset 0px -5px 0 0 #2ecc71,
        inset 0px 5px 0 0 #2ecc71,
        0 -20px 0 -10px #c0392b,
        0 20px 0 -10px #2980b9,
        0 -40px 0 -20px #e74c3c,
        0 40px 0 -20px #3498db;
}
.btn:before,
.btn:after {
    content: "";
    position: absolute;
    width: 125px;
    height: 5px;
    background-color: #16a085;
}
.btn:before {
    left: 0;
    bottom: 0;
}
.btn:after {
    right: 0;
    top: 0;
}

#12

А вот мой вариант:

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:
inset 0 15px 0 -10px #16a085,
inset 0 -15px 0 -10px #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: 60px;
position: absolute;
top: 100px;
left: 25px;
box-shadow:
inset 0 15px 0 -10px #2ecc71,
inset 0 -15px 0 -10px #16a085;
}


#13

Мой:
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: 105px;
padding: 15px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
box-shadow:

      0 5px 0 0 #2ecc71,
      0 -5px 0 0 #2ecc71,
      0 -25px 0 -10px #c0392b,
      0 -45px 0 -20px #e74c3c,
      0 25px 0 -10px #2980b9,
      0 45px 0 -20px #3498db;

}
.btn::before {
content: “”;
width: 125px;
height: 5px;
position: absolute;
top:90px;
left: 140px;
box-shadow:
10px 10px 0 0 #16a085,
-115px 65px 0 0 #16a085;
}


#14

Решение на 100% без применения .help и псевдоэлементов (обратите внимание на измененный марджин-топ и паддинг):

Код

.btn {
width: 250px;
margin: 0 25px;
margin-top: 105px;
padding: 15px 0;

line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
cursor: pointer;
box-shadow: 230px -25px 0 -20px #ecf0f1,
-230px 25px 0 -20px #ecf0f1,
-105px 25px 0 -20px #16a085,
105px -25px 0 -20px #16a085,
0 5px 0 #2ecc71,
0 -5px 0 #2ecc71,
0 -25px 0 -10px #c0392b,
0 -45px 0 -20px #e74c3c,
0 25px 0 -10px #2980b9,
0 45px 0 -20px #3498db;

}


#15

Выделите измененные свойства для наглядности. Интересный вариант.


#16

гениально! :heart_eyes:


#17

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: inset 0 -5px 0 0 #2ecc71,
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: 60px;
top: 100px;
left: 25px;
box-shadow: inset 0 -5px 0 0 #16a085,
inset 0 5px 0 0 #2ecc71;


#18

как по мне то не совсем прикольно выстраивать такие абракадабры, темболие вы берете цвет фона в тени добавляете а если цвет фона поменяется ваш вариант будет хуже чем с применением псевдоэлементов или .help)a


#19

Тоже думал в эту сторону, но не хотелось изменять исходную геометрию кнопки, и меня увело в псевдоэлементы. А так по моему это самый логичный вариант для создания такого эффекта.