⭐ 0
🔍
Metin Görsel PDF ve Belgeler Ses Müzik Elektronik Zaman Faydalı Araçlar Doğrulayıcılar Ezoterizm Oyunlar

CSS Filtre Oluşturucu

Yeniden düzenlenebilir bir CSS filter() ve zemin filtresi() işlevleri zinciri oluşturun ve kopyalanabilir bir CSS satırı ve PNG dışa aktarımıyla bunu kendi yüklediğiniz fotoğrafınızda canlı olarak önizleyin.

🖼️

Görseli Buraya Sürükleyin ve Bırakın

veya dosyalara göz atmak için tıklayın

Filtre zincirinizi burada önizlemek için yukarıya bir fotoğraf yükleyin. Buzlu cam zemin filtresi demosu, filtre olmadan da çalışır.

İşleniyor... 0%

Sonuç

Her CSS filtre oluşturucu, bulanıklık(), parlaklık(), kontrast() ve geri kalanını yığınlamanıza izin verir; ancak neredeyse hiçbiri sıranın önemine izin vermez çünkü çoğu, filtreleri yalnızca tek bir sabit sırayla uygular. Bu farklıdır: Filtre zinciri, yerel HTML5 sürükle ve bırak yöntemiyle oluşturulmuş gerçek, yeniden sıralanabilir bir listedir ve iki işlevin yeniden sıralanması, oluşturulan pikselleri, tıpkı üretim CSS'sinde olduğu gibi, gerçekten değiştirir. Bulanıklaştırma-sonra-hue-döndürme, renk-döndürme-sonra-bulanıklaştırma işleminden farklı görünüyor ve artık göndermeden önce nedenini görebilirsiniz.

Kendi fotoğrafınızı yükleyin ve dokuz zincirlenebilir işlevi (bulanıklaştırma, parlaklık, kontrast, doygunluk, renk döndürme, sepya, gri tonlama, ters çevirme ve alt gölge) ona simüle edilmiş bir renk örneği değil, bir "<img>" öğesi üzerinde gerçek bir "filtre" CSS bildirimi olarak canlı olarak uygulayın. Seçimden bir işlev ekleyin, zincirdeki konumunu değiştirmek için satırını listede yukarı veya aşağı sürükleyin, kaydırıcıyı ayarlayın ve her girişte önizleme ve kopyalanabilir 'filtre: ...;' satırı güncellemesi yapın. Sıranın tam orada, kendi düğmesi olan bir adımı kaldırın.

İkinci, daha küçük bir zincir, önizlemenin üzerine konumlandırılmış bir kaplama paneline uygulanan bir "arka plan filtresi" değeri oluşturur; böylece alttaki görüntünün kendi filtre zincirine dokunmadan buzlu cam efektini (modern yarı saydam gezinme çubuklarının ve modal arka planların ardındaki teknik) görebilirsiniz. Renkli yer tutucu arka planda, siz bir fotoğraf yüklemeden önce bile çalışır, böylece saniyeler içinde buzlu panel tasarımını arayabilirsiniz.

Önizleme doğru göründüğünde, CSS'yi doğrudan çıktı kutusundan kopyalayın veya gerçek bir PNG'yi dışa aktarın: Aynı filtre dizesi Canvas 2D bağlamının "ctx.filter" özelliğine (CSS "filter" özelliğiyle aynı sözdizimini kullanır) verilir ve tuval "canvas.toBlob()" ile indirilebilir bir dosyaya dönüştürülür. Dışa aktarılan görüntü, canlı önizlemeyle tam olarak eşleşir çünkü aynı işleme temel öğesi üzerinden çalışan aynı filtre dizesi tarafından üretilir. Her şey tarayıcınızda yerel olarak gerçekleşir; Fotoğrafınız hiçbir zaman hiçbir yere yüklenmez.

🛡️
Tarayıcıda Çalıştırıldı

Dosyalarınız ve girdileriniz bu cihazdan asla ayrılmaz. İşlem tamamen çevrimdışı çalışır. %100 Güvenli.

Kabul Edilen Formatlar ve Kurallar

  • Dokuz zincirlenebilir filtre işlevi — bulanıklaştırma, parlaklık, kontrast, doygunluk, renk döndürme, sepya, gri tonlama, ters çevirme ve alt gölge — her birinin kendi kaydırıcısı ve yerel sürükleme kolu vardır.
  • Anında güncellenen kopyalanabilir filtreye sahip canlı önizleme görüntüsü: CSS çizgisi, ayrıca buzlu cam görünümü için daha küçük bir arka plan filtre zinciri ve demo paneli.
  • Tek tıklamayla PNG dışa aktarımı, yüklenen fotoğrafı Canvas 2D'nin ctx.filter'ı ile tam olarak aynı filtre dizisi aracılığıyla işler ve ekrandaki önizleme pikselini piksel bazında eşleştirir.

Temel Faydalar

✓ Sürükle ve bırak yöntemiyle yeniden sıralama gerçektir: Bir filtreyi zincirde erken veya geç hareket ettirmek, sabit sıralı oluşturucuların size gösteremeyeceği şekilde oluşturulan sonucu gerçekten değiştirir.
✓ Canlı önizleme genel bir renk örneği yerine kendi yüklediğiniz fotoğraf üzerinde çalışır, böylece CSS'yi göndermeden önce filtre zincirinin gerçek içerik üzerinde tam olarak nasıl davrandığını görürsünüz.
✓ Ayrı bir arka plan filtre zinciri, bir kaplama panelindeki buzlu cam efektini gösterir ve PNG dışa aktarma, aynı filtre dizisini Canvas 2D aracılığıyla indirilebilir bir görüntüye dönüştürür.

Kullanım Durumları

  • • Bir ürün fotoğrafında bulanıklaştırma, parlaklık ve renk döndürme işlemlerini zincirleyin, ardından CSS'ye geçmeden önce tam oluşturma farkını görmek için bulanıklaştırmadan önce renk döndürme işlemini sürükleyin.
  • • Arka plan filtresi zinciriyle buzlu camdan bir gezinme çubuğu kaplaması oluşturun ve hazır arka plan filtresi artı -webkit- geri dönüş satırını kopyalayın.
  • • Görüntüyü bir sunucuya yüklemeden, yüklenen bir fotoğrafın canlı CSS önizleme pikseliyle piksel bazında eşleşen filtrelenmiş PNG'sini dışa aktarın.