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

Frosted Glass With Backdrop Filter الزجاج الضبابي للخلفية مع البديل

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

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

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

بينما يؤدي تطبيق filter: blur(10px) على البطاقة إلى طمس نصوصها الداخلية وإفساد قراءتها، تترك خاصية backdrop-filter: blur(10px) نصوص البطاقة حادة تماماً وتموه فقط المشهد الواقع خلفها لإنتاج تأثير الزجاج الضبابي الأنيق في الأشرطة العلوية. احرص دائماً على إقرانها بلون خلفية شبه شفاف بصيغة rgba() ليظهر التمويه من خلاله، مع تأمين خلفية احتياطية مقروءة وتفعيل الزجاج داخل استعلام الدعم @supports (backdrop-filter: blur(10px)).

الصف 2 كود برمجي
CSS 
.glass-panel {
  background-color: rgba(255, 255, 255, 0.92);
}
@supports (backdrop-filter: blur(10px)) {
  .glass-panel {
    background-color: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(10px);
  }
}
جرّب بنفسك
الصف 3 معاينة حية

مختبر المرشحات البصرية التفاعلي

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