CSS

Bir Öğeyi Diğeriyle Maskelemek

Her nasılsa, yakın zamana kadar benim bilgimden kaçtı, CSS element() işlev Firefox’ta desteklenir. Aslında, bunun için oldu iyi bir süre (yine de bir ön eke ihtiyacı olmasına rağmen). “Element() işlevi nedir?” diye ağladığınızı duyuyorum. Bir HTML öğesini CSS’mizde kullanmak üzere bir görüntü değeri olarak oluşturmanın bir yoludur. üzerinde verilen örnek MDN üzerinde işlenmiş bir görüntü kullanıyor <canvas> arka plan resmi olarak. Bu oldukça güzel bir kullanım örneği, ancak CSS Paint API zaten bir boyama çalışması oluşturmamıza ve onu CSS’mizde kullanmamıza izin veriyor – kontrol edin bu eğitim ile Temani Afif. Belki de tarayıcı desteğinin durmasının bir nedeni budur?

eleman() maske olarak

Benim ilgilendiğim şey kullanabilmek hiç eleman, özellikle bir başkası için maske olarak. Bir örnek, başlık gibi bir metin öğesidir. Öğeyi kimliğine başvurarak bir maske olarak uygulayabiliriz:

img {
mask-image: -moz-element(#mask);
}

Maskelemenin güzel yanı, arka planla aynı şekilde davranmasıdır. gibi özellikleri uygulayabiliriz. mask-size, mask-repeatvb. istediğimiz efekti elde etmek için.

Bu demoda resim maskesi olarak bir başlık (degrade uygulanmış) kullanıyorum.

Kalemi Gör
Bir öğeyi diğeriyle maskeleme
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Ulaşılabilirlik

Burada, özellikle erişilebilirlikle ilgili bazı bariz sorunlar var. Ekran okuyucu kullanan biri için en iyi deneyim nedir? Metin maskesi birkaç kez tekrarlanırsa, birden çok öğeye sahip olmak daha mı iyi olur? Veya kullanılması tercih edilir aria-hidden öğeyi bir ekran okuyucudan tamamen gizlemek ve ortaya çıkan etkiyi başka bir şekilde açıklamak için (aria-label veya aria-labelledby, Örneğin). Bir <h1> zaten burada doğru seçim olmayabilir. Bu soruların cevapları, projeden projeye farklılık gösteren, her zaman bağlama bağlı olacaktır.

Diğer sorun, orijinal öğeyi görsel olarak gizlemektir. Maske olarak kullandığımız için orijinalin sergilenmesini istemeyebiliriz. Öğeleri görsel olarak gizlemek için bir yardımcı program sınıfı kullanmaya alışmış olabilirsiniz ve aynı zamanda ekran okuyucu yazılımı tarafından okunabileceklerinden emin olabilirsiniz:

.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

(Scott O’Hara’nın bazı daha fazla bilgi bu konuda ve içeriği gizlemek için diğer yöntemler.)

Bu, öğeyi ve dolayısıyla maskemizi görünmez kılacağından, bu durumda işe yaramaz! Demoda, ekran dışında saklamak için tüylerimi diken diken ettim:

h1 {
position: absolute;
left: -100%;
}

Animasyon

Bir başka ilginç kullanım durumu, animasyonlu bir öğeyi maske olarak kullanmak olabilir. Ancak, performansından da anladığımız kadarıyla oldukça zayıf. bu demo. Ancak geçiş olarak kullanıldığında çok daha iyidir:

Kalemi Gör
Bir öğeyi animasyonlu bir öğeyle maskeleme
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

element()’e ihtiyacımız var mı?

Şu anda SVG ile bu etkilerin birçoğunu elde edebileceğimizi belirtmekte fayda var. Ancak CSS ile uğraşmaktan daha iyi bir şeyden hoşlanmayan biri olarak, bunun için yaygın bir destek görmeyi çok isterim. element()yaratıcı kodlama için başka bir şey değilse ve şüphesiz henüz dikkate almadığım pek çok kullanım durumu var.

Vincent De Oliveira’nın bir mükemmel yazı Bazı yaratıcı örnekler de dahil olmak üzere bir süre önce. Bazı demolar modern tarayıcılarda bozuk gibi görünüyor, ancak videolar var ve nelerin mümkün olabileceğine dair biraz ilham almak harika.

Şu anda belirtilen birkaç sorun var Şartnameancak bunlardan bazılarının çözüldüğünü ve spesifikasyonun ilerlediğini görmek harika olurdu.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu