Özet - Özel arka plan deseni

Houdini ile özel arka plan deseni kurarsın.

Özel arka plan deseni nasıl kurulur?

Özel bir arka plan deseni üç Houdini parçasını birleştirir. Önce @property --cell-size ile tipli bir değişken kaydedersin; bu, geçişlere izin verir. Sonra bir paint worklet registerPaint('grid', sınıf) ile çizimi tanımlar.

En son CSS'te background: paint(grid) yazıp --cell-size ile hücre boyutunu verirsin. Üçü birleşince desen, değişkenle birlikte canlandırılabilir.

Üç parça birlikte

Üç parça bir araya gelince desen canlandırılabilir. @property --cell-size, syntax: '<length>' ile kaydedildiğinde, --cell-size değişirse tarayıcı paint worklet'i yeniden çağırır.

Buna transition: --cell-size 0.3s ease eklersen hücre boyutu pürüzsüz büyür. CSS'ten tek satır değişiklik, worklette pürüzsüz bir canlandırma olur.

Uygulama --cell-size için @property yaz

Aşağıdaki CSS'i tamamla. @property --cell-size bildiriminde syntax: '<length>', inherits: true ve initial-value: 16px olsun.

Örnek çözümü göster

/* hücre boyutu için tipli değişken */
@property --cell-size {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

Uygulama Izgara desenini CSS'te kullan

Aşağıdaki CSS'i tamamla. .grid-bg bildiriminde --cell-size: 24px, background: paint(grid) ve transition: --cell-size 0.3s ease olsun.

Örnek çözümü göster

/* ızgara arka plan deseni */
.grid-bg {
  --cell-size: 24px;
  background: paint(grid);
  transition: --cell-size 0.3s ease;
}

Kendini test et

Bileşenleri rollerine eşle

@property --cell-size

Tipli değişken kaydı
registerPaint('grid')

Worklet çizimi
background: paint(grid)

CSS'te kullanım
--cell-size: 16px

Worklete veri
Özel desende paint worklet neyi okur?
```
/* worklet neyi okur? */
```
- inputProperties ile tanımlanan CSS değişkenlerini
- Yalnızca tarayıcı adını
- DOM ağacının tamamını
- Sayfanın URL adresini
Cevabı göster

inputProperties ile tanımlanan CSS değişkenlerini — Doğru. Worklet yalnızca inputProperties ile bildirdiği değişkenleri okur.

Sıradaki ders: Container-type derinlemesine

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler