👋 Bu makaledeki demolar, CSS gradyanları ve alt piksel oluşturma ile ilgili standart olmayan bir hatayla deney yapıyor. Davranışları gelecekte herhangi bir zamanda değişebilir. Ayrıca çok ağırlar. Yüklemek için tıkladığınız yerde bunları zaman uyumsuz olarak sunuyoruz, ancak yine de dizüstü bilgisayarınızın fanının dönmeye başlaması ihtimaline karşı size bir uyarı vermek istiyoruz.
Sinyali olmayan eski TV'lerdeki statik gürültüyü hatırlıyor musunuz? Veya sinyal kötü olduğunda ve resim bozuk olduğunda? Bir TV sinyali kavramının sizden önce gelmesi durumunda, işte tam olarak ne demek istediğimi gösteren bir GIF.
Resim görüntüle (otomatik oynatılan medya içerir)
Evet, sadece CSS kullanarak böyle bir şey yapacağız. İşte yaptığımız şey:
Kodu incelemeye başlamadan önce, statik gürültü efekti yaratmanın size göstereceğim yöntemden daha iyi yolları olduğunu söylemek istiyorum. SVG'yi kullanabiliriz, , filter mülkiyet vb. Aslında, Jimmy Chion bir iyi bir makale SVG ile nasıl yapılacağını gösteren.
Burada yapacağım şey, degradelerle ilgili bir hatadan yararlanan bazı hileleri keşfetmek için bir tür CSS deneyi. Yan projelerinizde eğlenmek için kullanabilirsiniz ancak SVG kullanmak daha temiz ve gerçek bir proje için daha uygundur. Ayrıca, efekt tarayıcılar arasında farklı davranır, bu nedenle bunları kontrol ediyorsanız Chrome, Edge veya Firefox'ta görüntülemek en iyisidir.
Hadi biraz gürültü yapalım!
Bu gürültü efektini yapmak için kullanacağız… gradyanlar! Hayır, bunun gerçekleşmesini sağlayan gizli bir bileşen veya yeni bir özellik yoktur. Zaten CSS araç kutumuzda bulunan şeyleri kullanacağız!
"Hile", degradelerin kenar yumuşatmada kötü olduğu gerçeğine dayanır. Sert stop renkleri kullanırken aldığımız bu tür pürüzlü kenarları biliyor musunuz? Evet çoğu yerde onlardan bahsediyorum. makalelerim çünkü biraz sinir bozucular ve işleri düzeltmek için her zaman birkaç piksel eklememiz veya çıkarmamız gerekiyor:
Gördüğünüz gibi, küçük bir fark olduğu için ikinci daire birinciden daha iyi işliyor (0.5%) ilk daire gibi tam sayı değerleri kullanarak düz bir sert renk durağı kullanmak yerine degradedeki iki renk arasında.
İşte başka bir bakış, bu sefer bir conic-gradient sonucun daha açık olduğu yer:
Bu demoları yaparken aklıma ilginç bir fikir geldi. Bozulmayı her zaman düzeltmek yerine neden tam tersini yapmaya çalışmıyorsunuz? Ne olacağı hakkında hiçbir fikrim yoktu ama eğlenceli bir sürprizdi! Konik gradyan değerlerini aldım ve zayıf kenar yumuşatma sonuçlarının daha da kötü görünmesi için bunları azaltmaya başladım.
Sonuncusunun ne kadar kötü olduğunu görüyor musun? Ortada bir tür karıştırılmış ve hiçbir şey düzgün değil. Daha küçük değerlerle tam ekran yapalım:
Sanırım bunun nereye gittiğini görüyorsunuz. Bir degradedeki sert renk durakları için çok küçük ondalık değerler kullandığımızda garip, bozuk bir görsel elde ediyoruz. Gürültümüz doğdu!
Gerçek konik gradyanı hala görebildiğimiz için istediğimiz grenli gürültüden hâlâ çok uzağız. Ancak değerleri çok, çok küçük değerlere indirebiliriz - örneğin 0.0001% - ve birdenbire artık gradyan yok, saf gren var:
Tada! Bir gürültü efektimiz var ve tek gereken bir CSS gradyanı. Bahse girerim bunu açıklamadan önce sana gösterseydim, bir eğime baktığını asla fark etmezdin. Görmek için eğimin merkezine çok dikkatli bakmalısınız.
Konumunu ayarlarken degradenin boyutunu çok büyük yaparak rastgeleliği artırabiliriz:
Gradyan sabit bir şekilde uygulanır 3000px kare ve yerleştirilmiş 60% 60% koordinatlar. Bu durumda merkezini neredeyse fark edemiyoruz. Aynı şey radyal gradyan için de yapılabilir:
Ve her şeyi daha rastgele (ve gerçek bir gürültü efektine daha yakın) yapmak için her iki gradyanı birleştirebilir ve background-blend-mode işleri yumuşatmak için:
Gürültü efektimiz mükemmel! Her bir örneğe yakından baksak bile, orada herhangi bir gradyan izi yok, bunun yerine oldukça güzel grenli statik gürültü var. Kenar yumuşatma hatasını şık bir özelliğe dönüştürdük!
Şimdi buna sahip olduğumuza göre, onu kullanabileceğimiz birkaç ilginç örnek görelim.
Animasyonlu TV sinyali yok
Başladığımız demoya geri dönersek:
Kodu kontrol ederseniz, degradelerden birinde bir CSS animasyonu kullandığımı göreceksiniz. Gerçekten bu kadar basit! Tek yaptığımız, konik gradyanın konumunu şimşek hızında hareket ettirmek (.1s) ve elde ettiğimiz şey bu!
Aynı tekniği tek bölümlük bir CSS sanat yarışmasında kullandım:
Grenli görüntü filtresi
Başka bir fikir, eski zaman görünümü elde etmek için gürültüyü bir görüntüye uygulamaktır. Gürültü olmadan görmek için her resmin üzerine gelin.
Bir sözde öğe üzerinde yalnızca bir gradyan kullanıyorum ve onu görüntüyle harmanlıyorum, sayesinde mix-blend-mode: overlay.
CSS kullanırsak daha da komik bir etki elde edebiliriz. filter özellik
ve eğer eklersek mask karışıma, daha da fazla efekt yapabiliriz!
Grenli metin işleme
Aynı efekti metne de uygulayabiliriz. Yine, tek ihtiyacımız olan bir çift zincirlenmiş gradyan. background-image ve ardından arka planları karıştırın. Tek fark, bizim de ulaşmamız background-clip bu nedenle efekt yalnızca her karakterin sınırlarına uygulanır.
Üretken sanat
Degrade değerlerle oynamaya devam ederseniz, basit bir gürültü efektinden daha şaşırtıcı sonuçlar elde edebilirsiniz. Çok benzeyen bazı rastgele şekiller elde edebiliriz. üretken sanat!
Tabii ki, çok çalışma gerektiren gerçek üretken sanattan uzağız. Ancak teknik olarak hata olarak kabul edilen bir şeyle neler başarılabileceğini görmek yine de tatmin edici!
canavar surat
için yaptığım son bir örnek CodePen'ler divtober 2022 koleksiyonu:
Tamamlayan
Umarım bu küçük CSS deneyini beğenmişsinizdir. Tam olarak "yeni" bir şey öğrenmedik ama geçişlerde biraz tuhaflık aldık ve bunu eğlenceli bir şeye dönüştürdük. Tekrar söyleyeceğim: bu gerçek bir projede kullanmayı düşüneceğim bir şey değil çünkü kenar yumuşatmanın herhangi bir zamanda ele alınıp alınmayacağını veya ne zaman ele alınacağını kim bilebilir? Bunun yerine, rastladığımda bu çok rastgele ve hoş bir sürprizdi. Kontrol etmesi de o kadar kolay değil ve tarayıcılar arasında tutarsız davranıyor.
Bu, onunla neler yapabileceğinizi merak ettiğimi söyledi! Değerlerle oynayabilir, farklı katmanları birleştirebilir, filterya da mix-blend-mode, ya da her neyse, kesinlikle harika bir şey alacaksınız. Kreasyonlarınızı yorum bölümünde paylaşın - ödül yok ama güzel bir koleksiyon elde edebiliriz!
