filter: blur وbrightness وcontrast وgrayscale
طبّق تأثيرات المرشحات الفوتوغرافية على العناصر باستخدام دوال خاصية CSS filter
filter: blur وbrightness وcontrast وgrayscale درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
خاصية CSS filter
تطبّق الخاصية filter تأثيرات رسومية على العناصر — على نحو مشابه لطبقات الضبط في Photoshop — من دون تعديل الصورة الفعلية.
filter: blur()
تطبّق تمويهًا غاوسيًا. وتمثل الوسيطة نصف قطر التمويه.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
تضبط السطوع. 1 = القيمة الأصلية، و0 = الأسود، و2 = سطوع مضاعف.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
تضبط التباين. 1 = القيمة الأصلية، و0 = رمادي مسطح، والقيم الأكبر من 1 تزيد التباين.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
تحوّل الصورة إلى تدرجات الرمادي. 0 = ألوان كاملة، و1 (أو 100%) = رمادي بالكامل.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
تضبط تشبع الألوان. 0 = رمادي، و1 = القيمة الأصلية، والقيم الأكبر من 1 = ألوان زاهية.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
تدوّر درجة اللون بزاوية محددة — فتزيح جميع الألوان حول عجلة الألوان.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
تطبّق درجة بنية دافئة بطابع قديم. 0 = القيمة الأصلية، و1 = بني كامل.
<div class="vintage"></div>
filter: drop-shadow()
تشبه box-shadow لكنها تتبع الشكل المرسوم الفعلي للعنصر، بما في ذلك المناطق الشفافة. وهي مثالية لصور PNG غير المنتظمة.
<div class="icon">★</div>
دمج عوامل تصفية متعددة
سلسِل عدة دوال filter بالفصل بينها بمسافات. وتُطبّق هذه الدوال من اليسار إلى اليمين:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
ينشئ filter سياق تكديس
يؤدي تطبيق filter على عنصر إلى إنشاء سياق تكديس جديد. وقد يتسبب ذلك في أن تتصرف عناصره الفرعية التي تستخدم position: fixed مثل position: absolute — وهو خطأ شائع.
تحقق سريع
أي دالة من دوال CSS filter تطبّق تمويهًا غاوسيًا على عنصر؟
خلاصة
تطبّق الخاصية filter تعديلات فوتوغرافية: blur() وbrightness() وcontrast() وgrayscale() وsaturate() وhue-rotate() وsepia() وdrop-shadow(). سلسِل عدة دوال باستخدام المسافات. تذكّر أن filter ينشئ سياق تكديس، ما قد يؤثر في العناصر الفرعية ذات الموضع الثابت.
تعلم CSS مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «filter: blur وbrightness وcontrast وgrayscale» مجاني؟
نعم — نص درس «filter: blur وbrightness وcontrast وgrayscale» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «filter: blur وbrightness وcontrast وgrayscale»؟
طبّق تأثيرات المرشحات الفوتوغرافية على العناصر باستخدام دوال خاصية CSS filter تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «filter: blur وbrightness وcontrast وgrayscale»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- filter: blur وbrightness وcontrast وgrayscale
- backdrop-filter للزجاج المصنفر
- mix-blend-mode لمزج الطبقات
- خاصية isolation