Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Đầu trang ảnh

Phần trên cùng của màn hình chi tiết, khi một tấm ảnh phải trả lời "đây là đâu" trước cả chữ.

Phương tiện

Xem trước trực tiếp

Nguồn

<header class="dc-ih">
  <div class="dc-ih__media" role="img" aria-label="3공구 지하 1층 골조 전경 사진"></div>
  <div class="dc-ih__scrim" aria-hidden="true"></div>
  <div class="dc-ih__bar">
    <button class="dc-ih__btn" type="button">
      <span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
    </button>
    <span class="dc-ih__spacer" aria-hidden="true"></span>
    <button class="dc-ih__btn" type="button">
      <span aria-hidden="true">♡</span><span class="dc-sr">저장</span>
    </button>
    <button class="dc-ih__btn" type="button">
      <span aria-hidden="true">↗</span><span class="dc-sr">공유</span>
    </button>
  </div>
  <div class="dc-ih__text">
    <p class="dc-ih__eyebrow">현장 기록</p>
    <h1 class="dc-ih__title">3공구 지하 1층 골조</h1>
    <p class="dc-ih__meta">사진 24장 · 9월 11일 · 김도현</p>
  </div>
</header>
.dc-ih {
  /* 사진 위에 올라가는 글자와 배지는 두 테마에서 같은 쪽이어야 한다. 스크림이
     밝은 모드에서도 어두우므로 글자는 늘 밝은 쪽, 배지 바탕은 늘 어두운 쪽이다.
     고정색을 적는 대신 토큰을 양쪽에서 뒤집어 그 두 값을 만든다. */
  --dc-on-media: var(--dc-text-on);
  --dc-media-ink: var(--dc-text);
  position: relative;
  display: grid;
  font-family: var(--dc-font);
  isolation: isolate;
}
@media (prefers-color-scheme: dark) {
  .dc-ih {
    --dc-on-media: var(--dc-text);
    --dc-media-ink: var(--dc-text-on);
  }
}
.dc-ih__media {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 22% 18%,
      color-mix(in srgb, var(--dc-info) 55%, var(--dc-sunken)),
      transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--dc-brand) 48%, var(--dc-sunken)),
      var(--dc-sunken));
}
.dc-ih__scrim {
  grid-area: 1 / 1;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--dc-overlay) 70%, transparent),
      transparent 34%),
    linear-gradient(to top,
      var(--dc-overlay),
      color-mix(in srgb, var(--dc-overlay) 40%, transparent) 46%,
      transparent 72%);
}
.dc-ih__bar {
  grid-area: 1 / 1;
  align-self: start;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--dc-1);
  padding: var(--dc-2);
  padding-top: calc(var(--dc-safe-top) + var(--dc-2));
}
.dc-ih__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--dc-r-full);
  background: color-mix(in srgb, var(--dc-media-ink) 38%, transparent);
  color: var(--dc-on-media);
  font-size: 19px;
  line-height: 1;
  backdrop-filter: blur(6px);
  transition: background var(--dc-fast);
}
.dc-ih__btn:active { background: color-mix(in srgb, var(--dc-media-ink) 58%, transparent); }
.dc-ih__spacer { flex: 1 1 auto; }
.dc-ih__text {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  display: grid;
  gap: var(--dc-1);
  padding: var(--dc-4);
  color: var(--dc-on-media);
}
.dc-ih__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--dc-on-media) 82%, transparent);
}
.dc-ih__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.dc-ih__meta {
  font-size: 13px;
  color: color-mix(in srgb, var(--dc-on-media) 84%, transparent);
}
.dc-ih--tall .dc-ih__media { aspect-ratio: 3 / 4; }
.dc-ih--tall .dc-ih__title { font-size: 26px; }
.dc-ih--tall .dc-ih__text { padding: var(--dc-5) var(--dc-4) var(--dc-6); }
.dc-ih__sheet {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  margin-top: var(--dc-8);
  padding: var(--dc-4);
  border-radius: var(--dc-r-lg) var(--dc-r-lg) 0 0;
  background: var(--dc-surface);
  color: var(--dc-text);
  box-shadow: var(--dc-sh-2);
}
.dc-ih__sheet-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.dc-ih__sheet-desc {
  margin-top: var(--dc-1);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dc-text-sub);
}

Cách dùng

  • Cho ảnh tràn hết bề ngang màn hình — chừa lề hai bên thì nó thành thẻ, không còn là đầu trang
  • Chữ đặt trên ảnh phải có lớp tối phía dưới; thử với ảnh sáng, đừng chỉ thử ảnh tối
  • Nếu phần chữ sẽ dài, dùng biến thể tấm đè lên để chữ nằm trên mặt phẳng riêng
  • Tỷ lệ khoảng 4:3; 3:4 chỉ dành cho màn hình mang tính trang bìa

Điểm cần lưu ý

  • Không cộng --dc-safe-top vào hàng nút thì tai thỏ che mất nút quay lại và chia sẻ
  • Nút nằm trên ảnh cần nền mờ — biểu tượng trắng trơn sẽ mất hút trên ảnh sáng
  • Ảnh có ý nghĩa thì cần role="img" và aria-label; ảnh trang trí thì đặt aria-hidden

Tiếp theo