پیش‌نمایش زنده
کد HTML
<div class="card">
  <div class="lc cavity"></div>
  <div class="lc line"></div>
  <div class="led"></div>
  <div class="text">UIVERSE</div>
</div>
کد CSS
.card {
  width: 270px;
  height: 220px;
  background-color: #1e1e1e;
  border-radius: 70px;
  box-shadow:
    inset 0px 35px 25px rgba(255, 255, 255, 0.05),
    inset 10px 0px 25px rgba(0, 0, 0, 0.8),
    inset 40px 0px 20px rgba(255, 255, 255, 0.05),
    inset -10px 0px 25px rgba(0, 0, 0, 0.8),
    inset -40px 0px 20px rgba(255, 255, 255, 0.05),
    inset 0px 10px 10px rgba(0, 0, 0, 0.9),
    inset 0px -15px 25px rgba(255, 255, 255, 0.05),
    10px 25px 40px -10px rgba(0, 0, 0, 0.8);
  position: relative;
}

.card .line {
  width: 100%;
  height: 2px;
  background-color: #4a4a4a;
  margin-top: 30%;
  position: relative;
}

.line::after,
.line::before {
  content: "";
  position: absolute;
  width: 5%;
  height: 2px;
  background-color: #2a2a2a;
}

.line::before {
  right: 0;
}

.card .cavity {
  width: 150px;
  height: 20px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  border-radius: 200px;
  margin: auto;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 30%);
}

.card .led {
  width: 7px;
  aspect-ratio: 1;
  background-color: #00ff00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 30%);
  border-radius: 100px;
  box-shadow: 0 0 6px #00ff00;
}

.card .text {
  text-align: center;
  margin-top: 70px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: bolder;
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06