کارت پروفایل شیشه‌ای را با HTML و CSS بساز

قرار است چه چیزی بسازیم؟

در این آموزش یک کارت پروفایل شیشه‌ای واکنش‌گرا می‌سازیم؛ همان کارتی که در Reel دیدید. افکت شیشه مات، هاله نور، حلقه رنگی دور لوگو، اطلاعات پروفایل و دکمه‌های تعاملی فقط با HTML و CSS ساخته می‌شوند و به کتابخانه جداگانه‌ای نیاز ندارند.

زمان تقریبی ساخت ۱۵ دقیقه است و آشنایی مقدماتی با HTML و CSS برای انجام آن کافی است.

مرحله اول: ساختار HTML کارت

یک فایل با نام index.html بسازید و ساختار زیر را داخل آن قرار دهید. آدرس تصویر را می‌توانید با لوگو یا تصویر پروفایل خودتان جایگزین کنید.

<main class="scene">
  <article class="glass-card" dir="rtl">
    <header class="profile">
      <div class="profile-copy">
        <h1>خانه برنامه‌نویسان البرز</h1>
        <div class="stats">
          <span><b>۲۶</b><small>پست</small></span>
          <span><b>۱٬۵۶۵</b><small>دنبال‌کننده</small></span>
          <span><b>۱٬۱۱۷</b><small>دنبال‌شونده</small></span>
        </div>
      </div>

      <span class="avatar-ring">
        <img src="https://cdn.alborzitc.ir/assets/logo.webp"
             alt="لوگوی خانه برنامه‌نویسان البرز">
      </span>
    </header>

    <section class="bio">
      <small>مرکز آموزشی</small>
      <p>آموزش برنامه‌نویسی و مهارت‌های دیجیتال</p>
      <p>طراحی • آموزش • نوآوری</p>
      <p>تبدیل ایده‌ها به تجربه‌های آموزشی</p>
    </section>

    <a class="profile-link" href="https://alborzitcenter.ir">
      alborzitcenter.ir ↗
    </a>

    <footer class="actions">
      <a href="tel:+982632333100">تماس</a>
      <a href="#">پیام</a>
      <a class="primary" href="#">دنبال‌کردن</a>
    </footer>
  </article>
</main>

مرحله دوم: ساخت پس‌زمینه و شیشه مات

کد زیر را در یک فایل با نام style.css قرار دهید و آن را در بخش head صفحه لینک کنید.

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #fff;
  font-family: Vazirmatn, system-ui, sans-serif;
  background:
    radial-gradient(circle at 25% 20%, #263d5b 0, transparent 32%),
    radial-gradient(circle at 80% 75%, #261f50 0, transparent 34%),
    linear-gradient(135deg, #07101b, #0a1522 48%, #040a11);
}

.scene {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.glass-card {
  position: relative;
  width: min(100%, 680px);
  aspect-ratio: 85 / 55;
  overflow: hidden;
  padding: clamp(22px, 5vw, 42px);
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: clamp(22px, 4vw, 38px);
  background: linear-gradient(135deg,
    rgb(112 130 170 / 32%),
    rgb(38 52 78 / 48%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 24%),
    0 0 24px rgb(154 132 255 / 42%),
    0 32px 72px rgb(0 0 0 / 38%);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

شفافیت پس‌زمینه، حاشیه روشن، سایه و backdrop-filter چهار جزء اصلی افکت Glassmorphism هستند. برای خوانایی متن، مقدار شفافیت کارت را بیش از حد کم نکنید.

مرحله سوم: چیدمان پروفایل و حلقه نور

.profile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.profile h1 {
  margin: 6px 0 18px;
  font-size: clamp(1rem, 3vw, 1.6rem);
}

.stats {
  display: flex;
  gap: clamp(14px, 4vw, 34px);
}

.stats span {
  display: grid;
  gap: 4px;
}

.stats b {
  font-size: clamp(.95rem, 2.8vw, 1.45rem);
}

.stats small,
.bio small {
  color: rgb(255 255 255 / 68%);
}

.avatar-ring {
  width: clamp(64px, 14vw, 96px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(#ff81d8, #746fff, #ffb56c, #ff81d8);
  box-shadow: 0 0 28px rgb(255 113 210 / 48%);
}

.avatar-ring img {
  width: 100%;
  height: 100%;
  display: block;
  padding: 7px;
  object-fit: contain;
  border: 2px solid rgb(255 255 255 / 90%);
  border-radius: 50%;
  background: #162339;
}

.bio {
  margin-top: clamp(18px, 4vw, 32px);
  line-height: 1.9;
}

.bio p {
  margin: 0;
}

مرحله چهارم: لینک و دکمه‌ها

.profile-link {
  display: inline-flex;
  margin-top: 14px;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.actions {
  position: absolute;
  right: clamp(22px, 5vw, 42px);
  bottom: clamp(20px, 4vw, 34px);
  display: flex;
  gap: 8px;
}

.actions a {
  min-width: 92px;
  padding: 11px 18px;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 12px;
  color: #fff;
  background: rgb(120 133 160 / 45%);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.actions .primary {
  border-color: rgb(190 190 255 / 75%);
  background: linear-gradient(135deg, #7073ff, #4f57e5);
}

.actions a:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

مرحله پنجم: سازگاری با موبایل

@media (max-width: 560px) {
  .glass-card {
    min-height: 500px;
    aspect-ratio: auto;
  }

  .profile h1 {
    max-width: 190px;
  }

  .stats {
    gap: 12px;
  }

  .actions {
    right: 18px;
    left: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .actions a {
    min-width: 0;
    padding-inline: 8px;
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .actions a {
    transition: transform .2s ease, filter .2s ease;
  }
}

اتصال فایل CSS و اجرای پروژه

این خط را داخل بخش head فایل HTML قرار دهید:

<link rel="stylesheet" href="style.css">

حالا فایل index.html را در مرورگر باز کنید. برای شخصی‌سازی خروجی کافی است تصویر، عنوان، آمار، متن معرفی، لینک‌ها و رنگ دکمه اصلی را تغییر دهید.

اگر افکت شیشه دیده نشد

• مطمئن شوید پشت کارت یک پس‌زمینه رنگی یا تصویری وجود دارد.
• هر دو ویژگی backdrop-filter و -webkit-backdrop-filter را نگه دارید.
• پس‌زمینه کارت باید نیمه‌شفاف باشد؛ رنگ کاملاً مات، blur پشت کارت را پنهان می‌کند.
• در موبایل واقعی نیز صفحه را تست کنید و فقط به کوچک‌کردن پنجره دسکتاپ اکتفا نکنید.

چک‌لیست خروجی حرفه‌ای

• کنتراست نوشته‌ها روی پس‌زمینه کافی است.
• تصویر پروفایل مربع و باکیفیت است.
• دکمه‌ها مقصد واقعی و عنوان قابل فهم دارند.
• کارت در عرض‌های ۳۲۰ تا ۱۴۴۰ پیکسل بدون اسکرول افقی نمایش داده می‌شود.
• انیمیشن‌ها کوتاه‌اند و تنظیم کاهش حرکت کاربر را رعایت می‌کنند.