انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: المرشحات البصرية في لغة CSS

Grayscale Brightness and Contrast مرشحات الرمادي والسطوع والتباين

طبّق المرشحات البصرية الفورية في لغة CSS لضبط السطوع والتباين والتدرج الرمادي والتمويه، ورسم ظلال تتبع حدود الأيقونات المفرغة وتصميم واجهات الزجاج الضبابي الأنيقة.
2 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تساعد دوال الإضاءة والأحادية اللونية على توحيد الهوية البصرية لصور البطاقات وشعارات الشركاء المتنوعة:

  • تحول دالة grayscale(100%) ألوان الصورة بالكامل إلى التدرج الرمادي المحايد بينما تبقيها 0% بألوانها الأصلية، وتمنح دالة sepia(100%) طابعاً دافئاً قديماً.
  • تضبط دالة brightness() مستوى السطوع العام حول القيمة الأصلية 100%، فالقيمة 75% تهدئ إضاءة الصورة والقيمة 115% تزيد إشراقها.
  • تعزز دالة contrast() الفارق بين المناطق المضيئة والداكنة فوق خط الأساس 100%.
الصف 2 كود برمجي
CSS 
.partner-photo {
  filter: grayscale(100%) brightness(92%);
  transition: filter 0.3s ease;
}
.partner-photo:hover {
  filter: grayscale(0%) brightness(104%) contrast(108%);
}
جرّب بنفسك

جميع فقرات هذا الدرس (المرشحات البصرية في لغة CSS)