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

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

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

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

1 лайк

Мой Вариант с позиционированием ) :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;

}

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

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

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

1 лайк

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

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

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


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

1 лайк

Мое решение:

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;
}
2 лайка

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

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

Мой:
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;
}

1 лайк

Решение на 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;

}

4 лайка

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

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

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;

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

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

Собственно 99.9%. 100% устал делать. Как уж придумал.

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

    .btn {
      display: block;
      margin: 0 25px;
      margin-top: 100px;
      padding: 20px 0;
      width: 250px;
      border: none;
      box-sizing: content-box;
      background-color: #2c3e50;
      color: white;
      text-align: center;
      text-transform: uppercase;
      font: inherit;
      line-height: 20px;
      box-shadow:
        inset 0px -5px 0 0px #2ecc71,
        inset 0px 5px 0 0px #16a085,
        0 20px 0 -10px #2980b9,
        0 40px 0 -20px #3498db,
        0 -20px 0 -10px #c0392b,
        0 -40px 0 -20px #e74c3c
      ;
    }

    .help {
       box-shadow: 
       -156.1px -144px 0px 6.1px #2ecc71,
       -156px -6.1px 0px 6.1px #16a085;
        transform: scale(0.4);
      }

Что-то ты намудрил. Все довольно просто:

.help {
  width: 125px;
  height: 5px;

  box-shadow: 
    25px -60px 0 0 #2ecc71,
    150px -5px 0 0 #2ecc71;
}
1 лайк