CSS Filter Generator

Bura'h, yorug'lik va boshqa effektlarni slayderni bilan sozlang va CSS filter kodini ko'rib turganda yarating

YangilanishlarCSS filtri generatorini qo'shing, butalashtirish va yorqinlikni sozlab yaratingYangilanishlarni ko'rish

Xususiyatlar

9 turdagi effekt slayderni bilan

Har harakatda ko'rinish va CSS kod bir vaqtda o'zgaradi

O'zingizning rasmingiz bilan sinab ko'ring

Xohlagan rasmingizni brauzerni ichida ko'rsatib effektni tekshiring

Bosib turgan vaqtda faqat asl rasm

Effekt qo'llanishidan oldin va keyin rasmni shu joyda solishtiring

8 turdagi namunadan ozgina sozlash

Sepia rangi yoki vintage kabi namunadan boshlab sozlang

Qanday ishlatiladigan

Rasmni tanlang

«O'zingizning rasmini tanlang» bilan xohlagan rasmingizni ko'rsating. Tanlamasa, ichki namuna rasmi bilan sinab ko'rishingiz mumkin

Effektni sozlang

Namunada yaqin muhitni tanlang yoki har bir slayderni bilan effekt kuchini sozlang

Oldin va keyin solishtiring

«Asl rasm bilan solishtiring» tugmasini bosib turgan vaqtda effektsiz rasmni ko'rsating

Kodni nusxa oling

«Nusxa olish» tugmasi bilan filter bir qatorini o'zingizning CSS ga joylashtiring

Foydalanish holatlari

Fon rasmining matn o'qilishi

Fon rasmini ozgina bura'h qilib, ustida sarlavhani oson o'qil qilib qo'ying

Rasm rangining birligini

Jamoa sahifasi yoki galereyaning rasmlarini oq-qora yoki sepia bilan tekishtirib qo'ying

Qo'l rasmisida son belgilash

Aslida ishlatilgan rasmga qo'llang va kulrang yoki vintage kabi sonlarni belgilang

Qora rejim rasmi sozlamasi

Qora fonga ko'z yumitib qo'lmasligi uchun yorug'lik va kontrast qiymatlarini belgilang

Asosiy bilim

Filter funksiyalari va birliklar

CSS filter xususiyati rasm yoki elementning ko'rinishiga effekt qo'llaydigan xususiyat bo'lib, blur yoki sepia kabi funksiyalarni yarim kengligi bilan oraliqqa olib yoziladi.

px (piksel)：Blur funksiyasi bura'h radiusini px bilan belgilaydi va 4px belgilasangiz 4 pikselli radiusda ranglar aralashadi.
% (foiz)：Brightness va sepia funksiyalari effekt kuchini % bilan belgilaydi, brightness funksiyasida 100% asl yorug'lik, 120% 2 kuni yorug'roq holat.
deg (gradus)：Hue-rotate funksiyasi rang aylanasida rang buraydigan burchakni deg bilan belgilaydi, 180deg belgilasangiz rang qarama-qarshi rang tomoni o'tadi.

Nima uchun yozilish tartibi natijasini o'zgartiradi

Filter ichidagi funksiyalar chapdan o'ngga qo'llaniladi, oldingi effekt qo'llanilgan natijavga keyingi effekt qo'llaniladi, shuning uchun yozilish tartibi o'zgarsa ko'rinish ham o'zgaradi. Masalan, oq-qora qilgandan keyin sepia qo'llasangiz jigarrang turadi, sepia qo'llangandan keyin oq-qora qilsangiz jigarrang o'chadi. Ushbu asbobda qo'llash tartibi mahkamlashtirilgan, lekin yaratilgan CSS kodini tahrir qilganda tartibni o'zgartira olasiz.

Backdrop-filter bilan farq

Filter va backdrop-filter bir xil funksiyalarni ishlata oladi, lekin effekt qo'llanish joyi boshqacha.

filter：Filter belgilangan elementning o'ziga (rasm yoki matn) ko'rinishiga effekt qo'llaydigan xususiyat.
backdrop-filter：Backdrop-filter belgilangan elementning orqasida ko'rinadigan qismiga effekt qo'llaydigan xususiyat bo'lib, shisha kabi ifodasida ishlatiladigan xususiyat.