तस्बिर हेडर

विवरण पर्दाको सिरान — जहाँ अक्षरभन्दा पहिले एउटै तस्बिरले 'यो कहाँ हो' भन्नुपर्छ।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<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);
}

कसरी प्रयोग गर्ने

तस्बिरलाई दायाँबायाँ खाली नछोडी पूरा चौडाईमा फैलाउनुहोस् — किनारा छाडे यो हेडर नभई कार्ड देखिन्छ
तस्बिरमाथि अक्षर राख्दा तल अँध्यारो ग्रेडिएन्ट अनिवार्य; उज्यालो तस्बिरमा पनि पढिन्छ कि जाँच्नुहोस्
लेख लामो हुने भए पाना चढेको रूप प्रयोग गरी अक्षरलाई छुट्टै सतहमा राख्नुहोस्
अनुपात ४:३ जति; ३:४ कभरजस्ता पर्दामा मात्र

ध्यान दिनुपर्ने कुरा

बटनको लाइनमा --dc-safe-top नजोडे नचले पछाडि र सेयर बटन छोप्छ
तस्बिरमाथिका बटनमा अर्धपारदर्शी पृष्ठभूमि दिनुहोस् — सेतो आइकन मात्र उज्यालो तस्बिरमा हराउँछ
अर्थ बोकेको तस्बिरमा role="img" र aria-label दिनुहोस्; सजावटी भए aria-hidden राख्नुहोस्

अर्को

तेर्सो क्यारोसेल मिडिया एप

थम्बनेल पट्टी मिडिया एप

तस्बिर ग्रिड मिडिया एप

प्रोफाइल हेडर मिडिया एप