0

Обнаружил на макете вот такую теньвведите сюда описание изображения

Возможно ли реализовать такую тень и если можно то каким способом?

5
  • А можно ссылку на примеры сайтов с реализацией подобного для ускорения ответа на Ваш вопрос?
    – An0ther0ne
    5 дек 2019 в 10:34
  • Ладно уже не нужно :)
    – An0ther0ne
    5 дек 2019 в 10:37
  • @Knurl360259 подскажи не вижу нестандартность)) ты про голубую в разные стороны?
    – Yamich
    5 дек 2019 в 10:42
  • Да про голубую в разные стороны, еще не сталкивался просто 5 дек 2019 в 10:45
  • Там не голубая в разные стороны, а наложение двух теней: от кнопки и от невидимого дива или еще какой фиговины прямоугольной. Ну по крайней мере я так вижу :)
    – An0ther0ne
    5 дек 2019 в 10:58

3 ответа 3

3

Можно еще играться

.box span{
	text-align:center;
	position:relative;
}
.box {
	width:220px;
	height:30px;
	background:#FFF;
	margin:0 auto;
  display: block;
  position: relative;
  margin-top: 50px;
  border-radius: 25px;
    
  -webkit-box-shadow: 0 0 10px #777;
  -moz-box-shadow: 0 0 10px #777;
  box-shadow: 0 0 10px #777;
}

/*==================================================
 * Эффект 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  top: -10px;
  left: -50%;
  width: 200%;
  height: 20%;
  background: transparent;
  -webkit-box-shadow: 0 20px 20px #777;
  -moz-box-shadow: 0 20px 20px #777;
  box-shadow: 0 20px 15px #777;
      border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
}
.effect5:after {
  width: 300%;
  height: 3px;
  left: -100%;
}
<button class="box effect5">
    <span>Эффект 5</span>
</button>

2

.example-shadow-3 {
  background: #e8e8e8;
  text-align: center;
}
.example-shadow-3 span {
  background: white;
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 50px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
<p class="example-shadow-3"><span></span></p>

1

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url("https://i.ytimg.com/vi/BYTpvpS12GI/maxresdefault.jpg") center bottom no-repeat;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 100px;
  color: #fff;
  width: 200px;
  height: 50px;
  border-radius: 10px;
  background-color: green;
  cursor: pointer;
  box-shadow: 3px 3px 15px rgba(0,0,255,.5);
}
.line-cont {
  position: absolute;
  width: 100vw;
  height: 300%;
  left: 50%;
  top: 50%;
  z-index: -1;
  transform: translateX(-50%);
  overflow: hidden;
  filter: blur(3px);
}
.line {
  height: 5px;
  filter: drop-shadow(3px 3px 2px rgba(0,0,255,.22)) 
    drop-shadow(6px 6px 2px rgba(0,0,255,.21)) 
    drop-shadow(9px 9px 2px rgba(0,0,255,.2)) 
    drop-shadow(12px 12px 2px rgba(0,0,255,.19)) 
    drop-shadow(15px 15px 2px rgba(0,0,255,.18)) 
    drop-shadow(18px 18px 2px rgba(0,0,255,.16)) 
    drop-shadow(21px 21px 2px rgba(0,0,255,.13)) 
    drop-shadow(24px 24px 2px rgba(0,0,255,.12)) 
    drop-shadow(27px 27px 2px rgba(0,0,255,.10)) 
    drop-shadow(30px 30px 2px rgba(0,0,255,.09)) 
    drop-shadow(33px 33px 2px rgba(0,0,255,.07)) 
    drop-shadow(36px 36px 2px rgba(0,0,255,.05))
    drop-shadow(39px 39px 2px rgba(0,0,255,.03));
  background-image: linear-gradient(to right, transparent 0, white 50%, transparent 100%);
  margin-top: -5px;
}
<body>
  <div class="box">
    <span>Some button</span>
    <div class="line-cont">
      <div class="line"></div>
    </div>
  </div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.