6XC

منشئ فلاتر CSS

امزج blur وbrightness وcontrast وgrayscale وhue-rotate وsaturate وsepia وinvert مع معاينة حية.

1,020 مشاهدة

6XC

خاصية filter

تطبّق filter تأثيرات تحرير الصور على أي عنصر — صور، فيديوهات، وحتى تخطيطات كاملة. تُسلسل الدوال في تصريح واحد: filter: brightness(110%) contrast(120%) saturate(130%) يمنح مظهرًا حيويًا شبيهًا بـ"إنستغرام"، وgrayscale(100%) هو الطابع الكلاسيكي بالأبيض والأسود، بينما تُعيد hue-rotate تلوين الرسومات دون الحاجة إلى ملفات جديدة.

الأسئلة الشائعة

هل يؤثر filter على الأداء؟

معظم الفلاتر مُسرَّعة بواسطة GPU ولا تُسبّب مشكلة مع عدد قليل من العناصر. blur هو الأكثر كلفة — أبقِ نصف القطر صغيرًا على المساحات الكبيرة، خاصة على الجوال.

ما الفرق بين filter وbackdrop-filter؟

يؤثر filter على العنصر نفسه ومحتواه؛ بينما يؤثر backdrop-filter على ما يظهر خلف العنصر — وهذا ما يستخدمه أسلوب الزجاجية (glassmorphism).

أدوات مشابهة

منشئ تدرجات CSS صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة. أنشئ منشئ ظل الصندوق CSS صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية. أنشئ منشئ استدارة الحواف CSS دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ. أنشئ منشئ ظل النص CSS صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي. أنشئ