Dribbble veya Behance’e göz atın ve bir görüntüye doku eklemek için basit bir teknik kullanan tasarımcıları bulacaksınız: gürültü. Gürültü eklemek, aksi takdirde düz renkleri veya gölgeler gibi yumuşak degradeleri daha gerçekçi hale getirir. Ancak tasarımcıların dokuya olan yakınlığına rağmen, web tasarımında gürültü nadiren kullanılır.
Bu makalede, yalnızca az miktarda CSS ve SVG ile bir degradeye doku eklemek için renkli gürültü üreteceğiz. Pekala, biraz gürültü yapalım!
Etkileşimli oyun alanı
Buradan kontrol edin. Neler olduğunu anlamanın en hızlı yolu, katmanları oluşturan parametrelerle oynamaktır.
İşin püf noktası: SVG gürültüsü ve CSS gradyanları
Bu makaledeki temel teknik, Chris Pachl’ın şu soruya verdiği Yığın Taşması yanıtının üzerine inşa edilmiştir: Bir CSS gradyanına gürültü ekleyebilir misiniz?
İşin püf noktası, gürültüyü oluşturmak için bir SVG filtresi kullanmak ve ardından bu gürültüyü arka plan olarak uygulamaktır. Bir degradenin altına yerleştirin, parlaklığı ve kontrastı artırın ve işte bu kadar — yavaş yavaş titreşen bir degradeniz var.
Anahtar bileşenler
Kaputun altında çalıştığımız şey:
SVG türbülansı: Bu bizim gürültü filtremizdir. Gradyanlı ve SVG’li arka plan: Ardından, bu filtreyi CSS’ye, filtreyi bir CSS gradyanı ile birleştiren bir arka plan görüntüsü olarak bırakıyoruz. Parlaklığı ve kontrastı artırın: Ardından, gürültünün parlaklığı ve kontrastı. Degradeleri harmanlayın: Son olarak, renkleri daha fazla filtrelemek ve degradeleri birlikte karıştırmak için isteğe bağlı olarak mix-harman modunu kullanırız.
Bu parçaların her biri hakkında ayrıntılara girelim.
SVG türbülansını kullanma
SVG alanı içinde filtreler tanımlayabiliriz ve böyle bir filtre Perlin gürültüsü oluşturmamıza izin verir. denir
Bu SVG örneği bir filtre oluşturur ve bir
Bazı özelliklerini değiştirerek oynayın
CodePen Göm Geri Dönüşü
Bu SVG’yi ayrı bir dosya olarak kaydedeceğiz. Bu makalenin tamamındaki demolarda SVG’yi almak için harici bir bağlantıya başvuruyoruz. Ancak pratikte yerel bir dosyaya veya kendi CDN’nize başvurursunuz. SVG’ye CSS’deki kimliğine göre başvurmak bazı tuhaf nedenlerle işe yaramaz, ancak oyun alanı demosunda gösterdiğimiz gibi SVG’yi satır içi yapabilirsiniz. Bunu, okunaklılık nedenleriyle demolarda yapmıyoruz.
SVG ve gradyan ile bir CSS arka planı oluşturma
SVG dosyasını bir yerde sakladıktan sonra, ona bir URL veya yol ile başvurabiliriz, artık onu bir degradeyle birlikte bir CSS arka planında kullanabiliriz.
.noise { /* … */ arkaplan: linear-gradient(sağa, mavi, şeffaf), url(https://grainy-gradients.vercel.app/noise.svg); }
Burada sipariş önemlidir. Bu özel örnekte, düz bir rengin (yani gürültünün olmaması) gürültüye ve ardından başka bir renge geçmesini istiyoruz. Ayrıca gürültünün görülebilmesi için degradenin bir ucunun şeffaf olmasını istiyoruz.
Bunun gibi:
CodePen Göm Geri Dönüşü
Ancak, bu özellikle hoş değil çünkü gürültü çok karışık. Yıpratmalı ve daha grenli hale getirmeliyiz. Bunu şu şekilde yapabiliriz…
Parlaklığı ve kontrastı artırma
Bir CSS filtresi eklemek, gürültüyü daha keskin hale getirerek en soluk renkleri beyaza veya siyaha doğru iter. Filtre tamamı için geçerlidir
.noise { /* … */ arkaplan: linear-gradient(sağa, mavi, şeffaf), url(https://grainy-gradients.vercel.app/noise.svg); filtre: kontrast (%170) parlaklık (%1000); }
Kontrast ve parlaklığın degradeyi nasıl etkilediğiyle oynayabilirsiniz. Parlaklığı ve kontrastı artırmak, aşağıdaki demodaki karışık grileri dışarı çıkarır.
CodePen Göm Geri Dönüşü
Gürültü aynı renkte değil
Yakınlaştırırsanız, gürültünün birçok renkten oluştuğunu fark edeceksiniz. SVG filtresi başlangıçta renkliydi ve parlaklığı ve kontrastı artırmak belirli renkleri vurguladı. Pek fark edilmese de, bu konfeti hoş karşılanmıyorsa, CSS karıştırma ile renkleri filtrelemeye devam edebiliriz (yani, mix-blend-mode ve background-blend-mode ).
CSS karıştırma
İki renk arasında geçiş yapan grenli bir degrade yapalım. CSS harmanlama, renk katmanlarını yığmamıza izin verir. Sonraki örnekte, başka bir
.noise { /* … */ background: linear-gradient(20deg, rebeccapurple, transparan), url(https://grainy-gradients.vercel.app/noise.svg); kontrast(%170) parlaklık(%1000); } .overlay { /* … */ arka plan: mokasen; mix-blend-modu: çarpma; }
Yeni bir yığın bağlamı oluşturmak ve neyin harmanlanacağını seçmek için CSS izolasyon özelliğini kullanabiliriz. Bir sonraki örnekte izolasyonu dışarıda bırakırsak, degrade ve kaplama arka plan rengiyle karışacaktır. Kalemde deneyin ve bu satırı yorumlayın!
/* Daha önce olduğu gibi */ .isolate { izolasyon: izole; /* … */ }
CodePen Göm Geri Dönüşü
Bazı kullanım durumları
Gürültülü bir degradenin nasıl oluşturulacağına dair oldukça basit bir örneğe baktık, ancak nerede kullanabilirsiniz? Birkaç kullanım örneğini ele alalım.
Işık ve gölgeler, tahıl ile
Gradyanlar doğal olarak nerede oluşur? Biri için ışık ve gölgeler. Gradyanları düzgün bir şekilde karıştırmak ve gürültüde görmek istediğimiz renkleri seçici olarak filtrelemek için CSS özelliği mix-blend-modu’ndan yararlanabiliriz.
CodePen Göm Geri Dönüşü
“Gölge” örneğinde, koyu bir degrade oluşturuyoruz ve “ışık” örneğinde efekti oluşturmak için bunu tersine çeviriyoruz. Her iki durumda da, mix-blend-modu, onu diğer degradelerle harmanlamamıza izin verir.
CodePen Göm Geri Dönüşü
holografik folyo
Güçlü parlaklık ve kontrast artışı, holografik folyoyu andıran bir gökkuşağı efekti yaratır.
CodePen Göm Geri Dönüşü
İşleri daha ileri götürmek
Oyun alanını deneyin ve dokuyu nasıl etkilediklerini görmek için farklı parametrelerle uğraşın.
Bunun ötesinde, işte bu teknikle uğraşmaya devam etmenin bazı yolları:
Farklı bir SVG kullanın: Bu makaledeki tüm degradeler aynı SVG’yi kullanır, ancak oyun alanındaki görünümün ve hissin yanı sıra kabalığı ayarlamak için gürültü oluşturan parametrelerle oynayabilirsiniz. Farklı degradeler deneyin: Doğrusal- gradyan, CSS dört gradyan türü daha sunar. Onlara isim verebilir misin? (İşte bir tane.) Daha fazla katman ekleyin: CSS harmanlama ile istediğiniz kadar katmanı istifleyebilir ve bunları harmanlayabilirsiniz. Farklı SVG filtreleri uygulayın: Gauss bulanıklığı ve farklı aydınlatma türleri dahil olmak üzere her türlü filtre vardır. . Ayrıca, bir CSS filtresinde referans alınabilir ve SVG’ye ek olarak herhangi bir öğeye uygulanabilir.
Başka ne düşünebilirsiniz? Lütfen yorumlarda ne keşfettiğinizi bize bildirin.
tarayıcı desteği
Burada tarayıcı desteği hakkında konuşmaktan kaçamayız. Bu tekniğin özü, tüm modern tarayıcılar tarafından desteklenmektedir. Tahmin edebileceğiniz gibi, Internet Explorer’da çalışmıyor. Bununla birlikte, Internet Explorer CSS’de arka plan olarak SVG’yi destekler (gerçek CSS filtre özelliğiyle değil).
CSS arka plan resmi olarak SVG
masaüstü
ChromeFirefoxIEdgeSafari5249165
Mobil / Tablet
Android ChromeAndroid FirefoxAndroidiOS Safari939234.2-4.3
CSS filtre efektleri
masaüstü
ChromeFirefoxIEdgeSafari18*35No796*
Mobil / Tablet
Android ChromeAndroid FirefoxAndroidiOS Safari93924.4*6.0-6.1*
Ayrıca, Blink tabanlı tarayıcıların (ör. Safari) ve WebKit tabanlı tarayıcıların (ör. Chrome) karma karıştırma modunu biraz farklı uyguladığını fark ettim, bu nedenle lütfen CSS karıştırma kullanıyorsanız tarayıcılar arasında test ettiğinizden emin olun. Kendi projelerimde, görsel farklılıkları küçük ince ayarlarla CSS ile manuel olarak uzlaştırmak için tarayıcıya özel medya sorguları kullandım.
Bu kadar! Artık SVG filtrelerini ve bunları arka plan olarak CSS filtreleriyle nasıl birleştireceğinizi öğrendiğinize göre, bir tasarıma derinlik ve doku eklemek için başka bir güzel görsel efektiniz var.