CSS Filter Generator

Bulanıklaşdırma, parlaqlıq və digər effektləri sürüşdürücülərlə ayarlayıb CSS filter kodunu izləyən şəkildə yaradın

Yeniləmə məlumatıCSS Filtr Generatoru əlavə edildi, bulanıqlıq və parlaqlığı tənzimləyərək yaradınYeniləmələri göstər

Xüsusiyyətlər

9 növ effekt sürüşdürücülərlə

Hər hərəkətdə önizləmə və CSS kodu eyni vaxtda dəyişir

Öz şəkliniz ilə sınaya bilərsiz

Əlinizdəki şəkli brauzer daxilində göstərərək effekti yoxlayın

Yalnız basaraq asılı qalsa orijinal şəkil

Effekt tətbiq etməzdən əvvəl və sonra yerində müqayisə edin

8 nümunədən incə tənzimləmə

Sepia tonu və ya vintage kimi nümunədan başlayaraq tənzimləyin

Necə istifadə edilir

Şəkil seçin

"Öz şəklinizi seçin" ilə əlinizdəki şəkli göstərin. Seçməzsəniz daxili nümunə şəkildə sınaya bilərsiz

Effekti tənzimləyin

Nümunədə yaxın atmosferi seçin və ya hər sürüşdürücü ilə effekt gücünü tənzimləyin

Əvvəl və sonranı müqayisə edin

"Orijinal şəkil ilə müqayisə et" basaraq asılı qalsa effektsiz şəkil göstər

Kodu kopyalayın

"Kopyala" düyməsi ilə filter-in 1 sətirini öz CSS-ə yapışdırın

İstifadə halları

Fon şəkildəki mətinin oxunabilirliyi

Fon şəklini az bulanıqlaşdırıb üzərinə qoyulan başlığı daha oxunabilir edin

Şəklin rəng tonunu birləşdirmə

Komanda səhifəsi və ya qalereyanın şəkillərini qara-ağ və ya sepia-ya uyğunlaşdırın

Əlinizin şəkli ilə dəyər təyini

Həqiqətən istifadə olunan şəkilə tətbiq edərək bulanıqlaşdırma və ya vintage tonu dəyərini təyin edin

Qaranlıq modu üçün şəkli tənzimləmə

Tünd fonda parlaq olmaması üçün parlaqlıq və kontrast azaldılmış dəyər təyin edin

Əsas bilik

Filter funksiyası və vahidləri

CSS filter xüsusiyyəti şəkilə və ya elementə görünüşə effekt tətbiq edən xüsusiyyətdir, blur və ya sepia kimi funksiyaları boş yerlərlə ayıraraq yazılır.

px (piksel)：blur funksiyası bulanıqlaşdırmanın radiusunu px ilə göstərən funksiyadır, 4px göstərərsən 4 piksellə radius rənqlər uyumlaşır.
% (faiz)：brightness və ya sepia funksiyası effekt gücünü % ilə göstərən funksiyadır, brightness funksiyasında 100% orijinal parlaqlıq, 120% 20% daha parlaq vəziyyətdir.
deg (derəcə)：hue-rotate funksiyası rəng çevrəsində rəngi döndərən bucağı deg ilə göstərən funksiyadır, 180deg göstərərsən rəng əks tərəfdəki rəngə keçər.

Nə üçün yazılış sırası nəticəni dəyişir

Filter-də yazılmış funksiyalar sırayla soldan sağa tətbiq olunur, əvvəlki effektin nəticəsinə sonrakı effekt tətbiq olunur, beləliklə sıra dəyişsə görünüş də dəyişə bilər. Məsələn, qara-ağa etdikdən sonra sepia tətbiq etsən qəhvə tonları qalır, sepia tətbiq etdikdən sonra qara-ağa etsən qəhvə tonları itmişdir. Bu alətdə tətbiq sırası sabitdir, lakin yaradılmış CSS kodunu redaktə edərək sıra dəyişə bilərsən.

backdrop-filter ilə fərqi

filter və backdrop-filter eyni funksiyaları istifadə edə bilərsəniz, lakin effektin tətbiq edildyi mövzu fərqlidir.

filter：filter göstərdiyi elementin özünə (şəkil və ya mətin kimi) görünüşə effekt tətbiq edən xüsusiyyətdir.
backdrop-filter：backdrop-filter göstərdiyi elementin arxasında görünən hissəyə effekt tətbiq edən xüsusiyyətdir, cam kimi ifadə üçün istifadə olunur.