10 Harika CSS, SVG ve Kanvas Maske Örnekleri İş Başında

SVG maskeleriyle harika şeyler yapabilirsiniz. Bu teknik yıllardır var ama sadece son zamanlarda ana akım web geliştirmede yerini aldı.

Özel kırpma maskelerinin ve SVG/tuval maskelerinin aşağıdaki demolarını bulmak için web'i taradım. Bu örnekler, maskeleri web üzerinde ne kadar ileri götürebileceğinizi ve nihayetinde geliştiricilere gelecekte neler sunabileceklerini gösterir.

1. Metin Maskeleme

Hareket halindeki metin maskelemenin temiz bir örneği için yukarıdaki kaleme bakın. HTML'deki gerçek sayfa metnini kullanır, böylece bu metni istediğinizi okumak için kolayca değiştirebilirsiniz.

Tüm sihir, arka plan klibi gibi özelliklerle CSS'de gerçekleşir. Bunları herhangi bir sayfadaki hemen hemen her metne uygulayabilirsiniz, ancak net bir arka planınız olmadıkça gösterilmezler.

Yakınlaştırma efekti de tamamen CSS'de yaratılmıştır, bu da bu kod parçacığını daha da etkileyici hale getirir.

2. Kesme Maskesi Çokgenleri

Bu kalemin karmaşık animasyonlar için JavaScript kullandığını, ancak tüm maskelemenin bir tuval öğesi aracılığıyla yapıldığını unutmayın. Şaşırtıcı derecede karmaşık bir fikir, bu yüzden kodu takip etmeye çalışmak zor olacak.

Ancak yukarıdaki çokgen maskeleme efekti, gördüğüm daha benzersiz tasarımlardan biri. CSS'de tasarlanmış şekilleri alır ve bir arka plan görüntüsünü maskelemek için bu şekilleri sayfa öğeleri olarak oluşturmak için JavaScript'i kullanır.

Bu, tutarlı bir animasyon çalıştırır ve SVG/XML içeriği için bir kapsayıcı gibi davranan JS destekli bir Canvas öğesi üzerinde çalışır. Oldukça çılgın şeyler ama maskelerin neler yapabileceğini görmek eğlenceli!

3. Görüntü Maskeleme

Bu kes ve kuru örnek, bir CSS görüntü maskesinin nasıl göründüğünü gösterir. Vincent De Oliveira tarafından oluşturulan yukarıdaki resim maskesinin öncesini ve sonrasını göreceksiniz.

Gerçek siyah dokulu maskenin yalnızca bir PNG dosyası olduğunu unutmayın. Ancak, maskelenmiş bir fotoğraf efekti oluşturmak için CSS'de dinamik olarak bir görüntünün üzerine katmanlanmıştır.

Şeffaflıkla dışa aktarıldığı sürece bunu istediğiniz dokuyla yapabilirsiniz. Mask özelliği hakkında pek çok ayrıntı vardır ve .svg dosyalarını desteklerken PNG'lerle başlamayı daha kolay bulabilirsiniz.

4. Düğme Vurguları

Düğme vurgulu efektlerinizi özelleştirmeyi hiç düşündünüz mü? Bu kod parçacığı, biraz yaratıcılık ve biraz CSS maskeleme ile yapabileceğinizi kanıtlıyor.

Yine, kodun tümü önceden tanımlanmış bir görüntü maskesi üzerinde çalışır ve her düğmenin kendi maske etkisi vardır. En havalı kısım, sadece maskeyi göstermekle kalmayıp, onu görünüm için canlandıran vurgulu animasyondur.

Bu kesinlikle deneysel bir kod parçası, ancak WebKit tarayıcılarında olağanüstü görünüyor ve umarım bu teknik birkaç yıl içinde temel bir unsur haline gelebilir.

5. SVG Metin Maskesi

İşte geliştirici Marco Barria tarafından oluşturulan metin maskesi efektinin biraz farklı bir örneği.

Bu tanımlayıcı özel SVG görüntüleri yerine kod aslında bir SVG öğesi kullanır. Hala düz HTML metin içeriği üzerine inşa edilmiştir ancak dinamik bir SVG filtresiyle çalışır.

Bu biraz daha teknik ama aynı zamanda geliştiriciye çok daha fazla kontrol sağlıyor. SVG dosyaları oluşturmak için Illustrator ile uğraşmak yerine, doğrudan HTML belgenizde satır içi SVG'leri kodlayabilirsiniz.

6. Kanvas Metin Maskesi

Calvin Davis'in bu tuval örneğinde, içerik için ham HTML kullandığını, ancak metnin kendisinin seçilemeyeceğini fark edeceksiniz.

Bunun yerine, DOM dışında metin soyutlayabilen bir Canvas öğesi kullanılarak sayfada oluşturulur. Bu, daha çok bir görüntü gibi davranmasını sağlar, böylece metnin arka plan üzerinde maskelendiği, ancak metin gibi hissetmediği bu efekti görürsünüz.

Bazı tasarımcılar, kullanılabilirlik eksikliği nedeniyle bundan hoşlanmayabilir, bu nedenle seçilebilir metin istiyorsanız, bu kurulumla uğraşmam.

Ancak bu, tuval şekilleriyle tipografiyi ne kadar ileri taşıyabileceğinizin harika bir örneği.

7. Hareketli Gradyan

Gerçekten harika bir başka metin efekti, geliştirici Svante Richter tarafından oluşturulan bu hareketli gradyandır.

HTML sayfasındaki tüm SVG kodunu kullanır, bu nedenle dinamik olarak maskeler oluşturur. Bu SVG kurulumu, tüm sayfayı devralarak ve ona degrade bir arka plan vererek, ardından bu arka planı yalnızca metin yoluyla maskeleyerek çalışır.

Gradyan, CSS aracılığıyla canlandırılabildiğinden, metin canlandırmanın tek parçasıymış gibi görünecektir. Oldukça havalı bir efekt ve deneysel bir web sitesine veya açılış sayfasına eklemeyi düşünebileceğiniz bir şey.

8. Hareketli Kırpma Maskesi

Bu soyut kırpma maskesi animasyonu, bir görüntünün üzerini maskelemek için rastgele oluşturulmuş JS destekli baloncukları kullanır. Yapışkan bir SVG blob şeyi oluşturmak için bir araya getirilmiş animasyonlu kırpma maskeleriyle birlikte bir tuval öğesi kullanır.

Çok fazla görünmeyebilir, ancak geliştirici Neil McCallion oldukça tatlı bir kod yazdı ve nihai sonuç kesinlikle garip.

Maskeleme çoğunlukla tuval öğesinde gerçekleşir, ancak JavaScript aracılığıyla kontrol edilir. Soyut bir SVG animasyonu ile iki görüntüyü harmanlamanın eğlenceli bir yolu.

Yine bu, gerçek dünyadaki bir web sitesinde pek çok amaca hizmet etmeyebilir, ancak maskelerle uğraşmak için harika bir deney.

9. SVG BG Maskesi

Diğer taraftan, hemen hemen her web sitesinde çalıştırabileceğiniz bir maskeleme efekti var.

Bu, mükemmel bir şekilde karışan karmaşık bir maskeleme efekti oluşturmak için bir kahraman başlığının yanında bir arka plan gradyanı kullanır.

Geliştirici Ryna Rudenko, çoğu maskeleme efektinin HTML'de katmanlandığı ham bir tuval öğesi kullanarak bu kalemle sınırları zorladı.

Bu maske yalnızca pratik ve büyük bir başlıkta kullanılabilir olmakla kalmaz, aynı zamanda gerçekten iyi hazırlanmış ve yalnızca HTML5 ve CSS3'te çalışır. İyi bir şekilde kullanılan modern web standartlarının en iyi örneği.

10. CSS ve SVG Maskeleri

Bu eksiksiz SVG maskeleri galerisi, saf CSS ile ne kadar yapabileceğinizi gerçekten eve götürüyor.

Hepsi aynı fotoğrafı, farklı formatları kullanan bir dizi farklı maskeleme tekniğini gösteren bir demo. Ayrıca her örnek, doğrudan sayfada kendiniz test edebileceğiniz örnek kodlar içerir; ancak kodu CodePen'in düzenleyicisinden kopyalamak da bir o kadar kolaydır.

Ancak bu küçük kalem, yapabileceğiniz farklı görüntü maskeleme efektlerine yönelik rehberli bir giriş görevi görür. Basit demolarla SVG'lere ve maskelere dalmak istiyorsanız başlamak için harika bir yer.