0

Как сделать у блока подобную тень? Она начинается не от краёв блока, а идёт где-то внутри, от краёв она прозрачнее. Пробовал через inset, но тень начинается от края и выглядит ужасно введите сюда описание изображения

2

2 ответа 2

3

Не знаю в чём проблема с инсетом. Вот, кажется, норм вышло.

div {
  background-color: #333;
  width: 300px;
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eee;
  font-size: 42px;
  font-weight: 700;
  box-shadow: inset 0 0 40px 80px #fff;
  box-sizing: border-box;
  padding: 12px;
  background-clip: content-box;
  text-shadow: 0 0 3px #000;
}
<div>SOME TEXT</div>

1
  • Тут проблема в том, что этот блок будет использоваться поверх другого, который тоже должно быть видно. Тень под ним нужна только для того, чтобы его было лучше видно на светлом фоне. Ваше решение идеальное, но не подходит в моём конкретном случае :(
    – zdobich
    29 ноя 2020 в 8:36
2

Вариант с обычной тенью. Используем псевдоэлементы :before, :after

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.container {
  height: 100px;
}

.number {
  position: relative;
  float: left;
  padding: 10px;
  font-size: 100px;
  font-family: fantasy;
  line-height: 100px;
  border: 8px dashed #e2ab46;
  border-radius: 300px;
  color: white;
  font-family: fantasy;
}

.name {
  position: relative;
  float: left;
  margin-left: 20px;
  font-size: 20px;
  line-height: 2;
  border-bottom: 8px dashed #e2ab46;
  color: white;
  font-family: monospace;
  font-weight: bold;
}

.name span {
  display: block;
  font-size: 57px;
  line-height: 1.3;
}

.number:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  box-shadow: 0px 0px 80px 40px rgba(0, 0, 0, 0.5);
}

.name:after {
  content: "";
  display: block;
  width: 100%;
  height: 0px;
  position: absolute;
  top: 50%;
  left: 0%;
  z-index: -1;
  box-shadow: 0px 0px 60px 30px rgba(0, 0, 0, 0.6);
}
<div class="container">
  <div class="number"><span>13</span></div>
  <div class="name">
    <span>УРОВЕНЬ</span>до следующего уровня
  </div>
</div>

Ваш ответ

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

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