.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
CSS Boyama API’si şu anda en iyi desteklenen Houdini API’lerinden biridir ve spesifikasyonu bir W3C aday önerisidir. Şu anda tüm Chromium tabanlı tarayıcılarda etkinleştirilmiştir, Safari’de kısmen desteklenmektedir ve Firefox için düşünülmektedir.
Ancak tam tarayıcı desteği olmasa bile Houdini Paint API ile yaratıcılığınızı konuşturabilir ve stillerinizin tüm modern tarayıcılarda çalıştığını görebilirsiniz. CSS Boya Çoklu Doldurma. Ekibim, birkaç benzersiz uygulamayı sergilemenin yanı sıra bir kaynak ve çalışma seti kitaplığı sağlamak için houdini.nasıl.
Houdini.nasıl #
Houdini.nasıl Houdini çalışma uygulamaları ve kaynakları için bir kitaplık ve referanstır. CSS Houdini hakkında bilmeniz gereken her şeyi sağlar: tarayıcı desteği, bir genel bakış çeşitli API’lerinden, kullanım bilgi, ek kaynaklarve canlı boya worklet örnekler. Houdini.how’daki her örnek, CSS Paint API tarafından desteklenir, yani her biri tüm modern tarayıcılarda çalışır. Bir koşuşturma ver!
Houdini’yi Kullanma #
Houdini iş uygulamalarının yerel olarak bir sunucu aracılığıyla veya üretimde HTTPS üzerinde çalıştırılması gerekir. Bir Houdini worklet ile çalışmak için, onu yerel olarak kurmanız veya aşağıdaki gibi bir içerik dağıtım ağı (CDN) kullanmanız gerekir. paketleri aç dosyalara hizmet etmek için. Daha sonra worklet’i yerel olarak kaydetmeniz gerekecektir.
Houdini.how vitrin çalışma uygulamalarını kendi web projelerinize dahil etmenin birkaç yolu vardır. Prototipleme kapasitesinde bir CDN aracılığıyla kullanılabilirler veya npm modüllerini kullanarak worklet’leri kendi başınıza yönetebilirsiniz. Her iki durumda da, tarayıcılar arası uyumlu olduklarından emin olmak için CSS Paint Polyfill’i de dahil etmek isteyeceksiniz.
1. Bir CDN ile Prototipleme #
Unpkg’den kaydolurken, worklet’i yerel olarak yüklemenize gerek kalmadan doğrudan worklet.js dosyasına bağlayabilirsiniz. Unpkg, worklet.js’yi ana betik olarak çözümleyecektir veya bunu kendiniz belirtebilirsiniz. Unpkg, HTTPS üzerinden sunulduğu için CORS sorunlarına neden olmaz.
CSS.paintWorklet.addModule("https://unpkg.com/package-name>");
Bunun sözdizimi ve geri dönüş değerleri için özel özellikleri kaydetmediğini unutmayın. Bunun yerine, her birinin worklet’e katıştırılmış geri dönüş değerleri vardır.
Özel özellikleri isteğe bağlı olarak kaydetmek için, property.js dosyasını da dahil edin.
script src="https://unpkg.com/<package-name>/properties.js"></script>
unpkg ile CSS Paint Polyfill’i dahil etmek için:
script src="https://unpkg.com/css-paint-polyfill"></script>
2. Worklet’leri NPM aracılığıyla yönetme #
Çalışma uygulamanızı npm’den kurun:
npm install package-name>
npm install css-paint-polyfill
Bu paketin içe aktarılması, boya işletini otomatik olarak enjekte etmez. Worklet’i yüklemek için paketin worklet.js’sine çözümlenen bir URL oluşturmanız ve bunu kaydetmeniz gerekir. Bunu şununla yaparsın:
CSS.paintWorklet.addModule(..file-path/worklet.js)
npm paket adı ve bağlantısı her worklet kartında bulunabilir.
Ayrıca, bir çerçeve veya paketleyicide olduğu gibi, komut dosyası aracılığıyla CSS Paint Polyfill’i eklemeniz veya doğrudan içe aktarmanız gerekir.
Houdini’nin modern paketleyicilerde polyfill boya ile nasıl kullanılacağına dair bir örnek:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';CSS.paintWorklet.addModule(workletURL);
Katkı yapmak #
Artık birkaç Houdini örneğiyle oynadığınıza göre, kendi örneğinizle katkıda bulunma sırası sizde! Houdini.how kendi başına herhangi bir çalışma uygulaması barındırmaz ve bunun yerine topluluğun çalışmalarını sergiler. Göndermek istediğiniz bir worklet veya kaynağınız varsa, github deposu katkı yönergeleri ile. Ne bulduğunuzu görmek isteriz!