Meydan okuma - Uzman projesi

Tüm uzman konularını birleştiren bir tasarım sistemi kurarsın.

Tasarım sistemi: tüm uzman konuları

Bu capstone, uzman seviyesinin tüm konularını tek bir tasarım sisteminde birleştirir. BEM sınıf adları bileşenleri adlandırır; @layer önceliği düzenler. Container query, kartın kabına göre biçimlenmesini; view transition, kart geçişlerini; anchor positioning, açılır panelin konumlanmasını sağlar.

İç içe yazım (&.is-active) bildirimleri yalın tutar; will-change: transform animasyonu hızlandırır. Yedi konu bir araya gelince tutarlı, hızlı ve öngörülebilir bir arayüz doğar.

Uygulama Capstone kart temelini kur

Tasarım sisteminin kart bileşenini kur. @layer components bölümü aç ve içine .card bildirimini yaz: padding: 1rem, container-type: inline-size ve view-transition-name: card. Aynı bölüm içinde .card__title bildirimini de ekle: font-size: clamp(1rem, 4cqi, 1.5rem).

Örnek çözümü göster

/* kart bileşeni */
@layer components {
  .card {
    padding: 1rem;
    container-type: inline-size;
    view-transition-name: card;
  }

  /* kart başlığı */
  .card__title {
    font-size: clamp(1rem, 4cqi, 1.5rem);
  }
}

Uygulama Capstone açılır paneli kur

Açılır paneli ekle. .card__button etiketinde anchor-name: --card-btn bildirimi olsun. .card__menu etiketinde position-anchor: --card-btn, position: absolute, top: anchor(bottom), position-try: --flip ve will-change: transform bildirimleri olsun.

Örnek çözümü göster

/* kart düğmesi */
.card__button {
  anchor-name: --card-btn;
}

/* kart menüsü */
.card__menu {
  position-anchor: --card-btn;
  position: absolute;
  top: anchor(bottom);
  position-try: --flip;
  will-change: transform;
}

Kendini test et

Bir kartın animasyonunu hızlandırmak için hangi bildirim kullanılır?
```
.card {
  /* ??? */
  animation: cardIn 0.3s ease-out;
}
```
- transform: optimize
- will-change: transform
- speed: fast
- animation-speed: high
Cevabı göster

will-change: transform — Doğru. will-change: transform, tarayıcıya transform özelliğinin değişeceğini bildirir; bu, animasyonu daha akıcı yapar.

İç içe yazım & seçicisini tamamla

.card {
  padding: 1rem;
  ____.is-active {
    border-color: #6366f1;
  }
}

Cevabı göster

.card {
  padding: 1rem;
  &.is-active {
    border-color: #6366f1;
  }
}

Tasarım sistemi parçalarını eşleştir

@layer

Öncelik katmanı
container-type

Kaba göre duyarlılık
view-transition-name

Geçiş bağı
anchor-name

Çapa adı
will-change

Animasyon ipucu

Sıradaki ders: Uzman bölüm sınavı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler