ក្បាលប្រវត្តិរូប

បញ្ជាក់ថាអ្នកនេះជានរណា ហើយអ្វីដែលធ្វើបានឥឡូវជាការតាម ឬការកែប្រវត្តិរូបខ្លួនឯង។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<header class="dc-ph">
  <div class="dc-ph__top">
    <span class="dc-ph__avatar" aria-hidden="true">김</span>
    <dl class="dc-ph__stats">
      <div class="dc-ph__stat">
        <dt class="dc-ph__stat-k">기록</dt>
        <dd class="dc-ph__stat-v">128</dd>
      </div>
      <div class="dc-ph__stat">
        <dt class="dc-ph__stat-k">팔로워</dt>
        <dd class="dc-ph__stat-v">2,410</dd>
      </div>
      <div class="dc-ph__stat">
        <dt class="dc-ph__stat-k">팔로잉</dt>
        <dd class="dc-ph__stat-v">86</dd>
      </div>
    </dl>
  </div>
  <div class="dc-ph__ident">
    <h1 class="dc-ph__name">김도현</h1>
    <p class="dc-ph__handle">@dohyun · 3공구 현장 기사</p>
    <p class="dc-ph__bio">타설·양생 기록 담당입니다. 사진은 매일 퇴근 전에 올립니다.</p>
  </div>
  <div class="dc-ph__actions">
    <button class="dc-ph__btn dc-ph__btn--primary" type="button">팔로우</button>
    <button class="dc-ph__btn" type="button">메시지</button>
    <button class="dc-ph__icon" type="button">
      <span aria-hidden="true">⋮</span><span class="dc-sr">더보기</span>
    </button>
  </div>
</header>

.dc-ph {
  /* 사진 위에 올라가는 글자와 배지는 두 테마에서 같은 쪽이어야 한다. 스크림이
     밝은 모드에서도 어두우므로 글자는 늘 밝은 쪽, 배지 바탕은 늘 어두운 쪽이다.
     고정색을 적는 대신 토큰을 양쪽에서 뒤집어 그 두 값을 만든다. */
  --dc-on-media: var(--dc-text-on);
  display: grid;
  gap: var(--dc-4);
  padding: var(--dc-4);
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
@media (prefers-color-scheme: dark) {
  .dc-ph {
    --dc-on-media: var(--dc-text);
  }
}
.dc-ph__top {
  display: flex;
  align-items: center;
  gap: var(--dc-4);
}
.dc-ph__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--dc-r-full);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dc-brand) 72%, var(--dc-sunken)),
    color-mix(in srgb, var(--dc-info) 58%, var(--dc-sunken)));
  color: var(--dc-on-media);
  font-size: 26px;
  font-weight: 700;
}
.dc-ph__stats {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-around;
  gap: var(--dc-2);
  margin: 0;
}
.dc-ph__stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  min-width: 56px;
}
.dc-ph__stat-k {
  font-size: 12px;
  color: var(--dc-text-sub);
}
.dc-ph__stat-v {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--dc-text);
}
.dc-ph__ident { display: grid; gap: var(--dc-1); }
.dc-ph__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--dc-text);
}
.dc-ph__handle {
  font-size: 13px;
  color: var(--dc-text-mute);
}
.dc-ph__bio {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dc-text-sub);
}
.dc-ph__actions {
  display: flex;
  align-items: center;
  gap: var(--dc-2);
}
.dc-ph__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 var(--dc-3);
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface);
  color: var(--dc-text);
  font-size: 15px;
  font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-ph__btn:active { background: var(--dc-sunken); }
.dc-ph__btn--primary {
  border-color: transparent;
  background: var(--dc-brand);
  color: var(--dc-text-on);
}
.dc-ph__btn--primary:active { background: var(--dc-brand-hi); }
.dc-ph__btn--wide { flex: 1 1 100%; }
.dc-ph__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface);
  color: var(--dc-text);
  font-size: 18px;
  line-height: 1;
}
.dc-ph__icon:active { background: var(--dc-sunken); }
.dc-ph--cover { gap: 0; padding: 0; }
.dc-ph__cover {
  height: 132px;
  background:
    radial-gradient(120% 90% at 78% 20%,
      color-mix(in srgb, var(--dc-ok) 46%, var(--dc-sunken)),
      transparent 60%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--dc-brand) 46%, var(--dc-sunken)),
      var(--dc-sunken));
}
.dc-ph--cover .dc-ph__top {
  margin-top: calc(-1 * var(--dc-8));
  padding: 0 var(--dc-4);
  align-items: flex-end;
}
.dc-ph--cover .dc-ph__avatar {
  width: 84px;
  height: 84px;
  border: 3px solid var(--dc-surface);
  box-shadow: var(--dc-sh-2);
}
.dc-ph--cover .dc-ph__ident { padding: var(--dc-4) var(--dc-4) 0; }
.dc-ph--cover .dc-ph__actions { padding: var(--dc-4); }

របៀបប្រើ

លេខច្រើនបំផុតបី; បន្ថែមលេខទីបួន គ្មានមួយណាចាប់ភ្នែកទេ
នៅប្រវត្តិរូបខ្លួនឯង ប្ដូរប៊ូតុងតាមទៅជា «កែប្រវត្តិរូប» ទទឹងធំមួយ — មិនគួរមើលទៅដូចទំព័ររបស់អ្នកដទៃ
អត្ថបទណែនាំពីរជួរគឺគ្រប់គ្រាន់ កាត់ផ្នែកសល់; តួអង្គសំខាន់នៃអេក្រង់គឺមាតិកាខាងក្រោម
គ្មានរូបភាពទេ ប្រើអក្សរដើមនៃឈ្មោះ — រង្វង់ប្រផេះទំនេរមើលទៅដូចផ្ទុករូបមិនជាប់

ចំណុចត្រូវប្រុងប្រយ័ត្ន

column-reverse ដាក់លេខនៅលើស្លាកតាមរូបរាង ប៉ុន្តែកម្មវិធីអានអេក្រង់នៅអានថា «អ្នកតាម ២,៤១០» — សូមពិនិត្យថាយល់បាន
បើលេខចុចបាន ត្រូវធ្វើជាប៊ូតុង ឬតំណ; dd ចុចក៏គ្មានអ្វីកើតឡើង
ពេលរូបតំណាងឡើងត្រួតលើរូបក្របមុខ សូមដាក់ស៊ុមឱ្យវាញែកពីរូប

បន្ទាប់

រូបរំកិលផ្ដេក មេឌៀ កម្មវិធី

ក្បាលរូបភាព មេឌៀ កម្មវិធី

ជួររូបតូច មេឌៀ កម្មវិធី

ក្រឡាចត្រង្គរូបថត មេឌៀ កម្មវិធី