Softonic

Gürültü Dokusu Üreteci

Adım 1 / 2
Sonraki

Bir tutam gürültü, bantlaşmayı gizler, düz renk dolgularını yumuşatır ve arayüz geçişlerinin daha az steril görünmesini sağlar. Bu üreteç, SVG feTurbulence filtresiyle kusursuz döşenebilen kare bir gürültü dokusu oluşturur; arka plan rengi, gürültü saydamlığı, gren frekansı ve gürültü türü için denetimler sunar ve size hazır CSS verir: bir arka plan rengi ve doğrudan stil dosyanıza yapıştırabileceğiniz satır içi bir SVG veri URI’si.

Gürültü dokusu nasıl üretilir

  1. 1

    Arka plan rengini seçin

    Gren bu rengin üzerine biner; bu yüzden gerçekten kullanacağınız yüzeyle başlayın.

  2. 2

    Saydamlığı ayarlayın

    Neredeyse fark edilmeyenden (%2-5) yoğun film grenine (%25 ve üzeri) kadar. Arayüzde ince dokunuş kazandırır.

  3. 3

    Frekansı ayarlayın

    Yüksek temel frekans ince ve sık bir gren verir; düşük frekans daha büyük ve yumuşak lekeler oluşturur.

  4. 4

    Gürültü türünü seçin

    Fraktal gürültü yumuşak ve doğaldır. Türbülans ise daha kontrastlı ve bulutumsudur.

  5. 5

    CSS kodunu kopyalayın

    Çıktı, bir arka plan rengi ve satır içi bir SVG veri URI'sidir; stil dosyanıza doğrudan yapıştırabilirsiniz.

feTurbulence ile SVG gürültüsü

Gürültüyü en küçük boyutla göndermenin yolu SVG ve bir türbülans filtresidir:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Bunu background-image: url("data:image/svg+xml,...") biçiminde satır içi kullanın; birkaç yüz baytlık bir işaretlemeyle her yüzeye döşenen, ek bir HTTP isteği doğurmayan bir doku elde edersiniz.

Kullanım senaryosuna göre önerilen ayarlar

Kullanım senaryosu Saydamlık Temel frekans Gürültü türü
Koyu mod arayüz panelleri %3-5 0,8-1,0 Fraktal gürültü
Kahraman bölümü geçişinin üzeri %5-10 0,7-0,9 Fraktal gürültü
Kâğıt dokulu kart %8-15 0,6-0,8 Fraktal gürültü
Film greni fotoğraf görünümü %15-25 0,9-1,2 Fraktal gürültü
Retro afiş greni %25-40 0,4-0,6 Türbülans

Performans notları

  • SVG türbülansı çoğu tarayıcıda GPU gerektirmez. CSS arka planlarında çalışır ve ucuza yeniden çizilir.
  • Tek bir döşeme parçasını yeniden kullanın. Üreteç, stitchTiles="stitch" içeren 200 x 200 boyutunda bir parça verir; geniş ekranda eklem yeri fark edilmeden tekrarlanır.
  • Gürültüyü canlandırmaktan kaçının. feTurbulence, baseFrequency değişmeden iyi canlanmaz ve uzun oturumlarda performans ciddi biçimde düşer.
  • Gürültüyü geçişlerin üzerine katmanlayın. Bir CSS geçişinin üzerine %10 saydamlıkla gren eklemek, tek başına geçişten çok daha zengin bir yüzey verir.

Sık Sorulan Sorular

Geniş bir düz renk ya da geçiş alanı fazla steril göründüğünde. Kahraman bölümleri, modal arka planları ve koyu arayüz panelleri %3-10 gürültüyle derinlik kazanır. Okunabilirliği zedeleyebileceği için metin alanlarında kullanmayın.

SVG’nin feTurbulence filtresinde type="turbulence" Perlin gürültüsünün mutlak değerini üretir (daha yüksek kontrast, bulutumsu), type="fractalNoise" ise işaretli değerler verir (daha yumuşak, daha doğal gren). Arayüz için neredeyse her zaman fraktal gürültü istersiniz.

Hayır. Üreteç, doğrudan CSS içine gömülen birkaç yüz baytlık satır içi bir SVG veri URI’si verir; ne görsel dosyası ne de ek istek vardır. Üstelik yeniden örnekleme olmadan her yüzeye ölçeklenir.

Evet. Kanal başına 8 bitlik ekranlarda geçişler, düşük kontrastta görünür bantlaşma gösterebilir. %2-3’lük bir gürültü katmanı geçişi dağıtır ve bantlaşmayı hem telefonlarda hem monitörlerde ortadan kaldırır.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

Araç diğer dillerde mevcuttur