پیش‌نمایش زنده
کد HTML
<div class="card">
  <div class="card-overlay"></div>
  <div class="card-inner">YOUR<br>CONTENT<br>HERE</div>
</div>
کد CSS
.card {
  --bg: #f1f1f1;
  --contrast: #f9f9f9;
  --grey: #d9d9d9;
  position: relative;
  padding: 12px;
  background-color: var(--bg);
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px -10px;
}

.card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, var(--bg), var(--grey) 20px);
  filter: opacity(15%);
}

.card-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 180px;
  height: 240px;
  background-color: var(--contrast);
  border-radius: 25px;
  /* Content style */
  font-size: 26px;
  font-weight: 700;
  color: #555;
  text-align: center;
  font-family: Arial, sans-serif;
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06