Реализация нестандартной тени в css!

209

12 декабря 2021, 06:20

Обнаружил на макете вот такую тень

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

Answer 1

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

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

Answer 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>

Answer 3

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблема со скриптом для анимации jQuery

У меня есть скрипт для анимации текста при наведении на елемент:

121

c++

поиск необходимой вершины в графе

c++

C++ кавычки в строке

Пытаюсь разработать программу на С++ по созданию древа каталогов и назначение разрешений к ним через PowerShell

c++

как правильно закрыть диалоговое окно

Открываю диалоговое окно:

231