Grenli Gradyanlar | CSS-Püf Noktaları

0
14

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 ve “türbülans” veya “gürültü” olup olmadığı ve ne kadar ince veya kaba olduğu gibi nitelikleri tanımlayabiliriz. Bence Szabó, desen oluşturmak için nasıl kullanılabileceğini gösterdiği için bunu çok daha ayrıntılı olarak açıklıyor.

Bu SVG örneği bir filtre oluşturur ve bir grenli gradyanlarımız için kullanabileceğimiz element. SVG’nin den ayrı olarak tanımlanır. , ve basitçe ona atıfta bulunur.

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

, yani en soldaki mavi, başladığımız saf maviden farklı bir mavidir.

.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

işaretlemeye, orijinal degradenin üzerine konumlandırın, ardından mix-harman modunu uygulayın: çarpma; işleri yumuşatmak için.

.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.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz