ما هو شكل الزجاج؟ كيف يقوم مرشح الخلفية ببناء الزجاج المتجمد في CSS

توجد الألواح الزجاجية المتجمدة في كل مكان في تصميم الواجهة: الشريط الجانبي الشفاف في نظام تشغيل سطح المكتب، والرأس غير الواضح الذي يسمح بعرض الصورة من خلاله، والبطاقة التي تطفو فوق تدرج على الصفحة المقصودة. المظهر سهل الوصف ومن السهل بشكل غريب أن تخطئ في CSS. ينتهي الأمر باللوحة بشكل مسطح ورمادي، أو أن التمويه لا يفعل شيئًا، أو أن النص الأبيض الموجود عليها غير قابل للقراءة على نصف الخلفية.

يشرح هذا الدليل CSS الذي يجعل التأثير يعمل، ولماذا توجد كل خاصية من الخصائص الخمس، وكيفية إبقاء النص قابلاً للقراءة عندما تستمر الخلفية في التغير، وما هي تكلفة عرض الأداء، وكيفية التراجع برشاقة. تستخدم الأمثلة العملية مخرجات تولز مولد CSS الزجاجي، الذي يبني التعليمات البرمجية من أشرطة التمرير والمعاينة المباشرة.

ليرة تركية؛DR: Glassmorphism هو نمط واجهة المستخدم حيث تبدو اللوحة مثل الزجاج المصنفر: خلفية شبه شفافة بالإضافة إلى ذلك backdrop-filter: blur() لذا فإن المحتوى الموجود خلفه يظهر بهدوء، وعادةً ما يتم الانتهاء منه بحدود شفافة مقاس 1 بكسل وظل ناعم. يحتاج إلى شيئين ليكون مرئيًا: تعبئة شفافة جزئيًا وشيء ملون خلف اللوحة. يتغير تباين النص مع كل ما يمر تحته، لذا اختبره على الأجزاء الأكثر سطوعًا وحلمًا في الخلفية الحقيقية. مولد التشكل الزجاجي CSS يكتب الكتلة الكاملة، بما في ذلك -webkit- البادئة، من جانب العميل، مجانية، بدون تسجيل.

ما هو Glassmorphism في CSS؟

Glassmorphism هو نمط مرئي يقلد الزجاج المصنفر. يحصل العنصر على لون خلفية ذو عتامة منخفضة ومرشح خلفية يطمس وحدات البكسل الموجودة خلفه، بحيث تظهر الأشكال والألوان الموجودة أسفله ناعمة من خلال السطح. تشير الحدود الضوئية الرفيعة إلى الحافة الزجاجية، ويرفع الظل اللطيف اللوحة عن الصفحة.

الخاصية الرئيسية هي backdrop-filter، محددة في W3C وحدة تأثيرات التصفية المستوى 2. يأخذ نفس وظائف التصفية مثل filter (blur()، saturate()، brightness() والباقي) ولكنه يطبقها على المنطقة الواقعة خلف العنصر وليس على العنصر نفسه. هذا الاختلاف الوحيد هو ما يجعل التأثير ممكنًا.

فيما يلي الكتلة الكاملة التي ينتجها المولد لإعداده المسبق Frosted

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

ستة أسطر، ولكل منها وظيفة.

مرشح مقابل مرشح الخلفية: ما الفرق؟

filter يغير كيفية رسم العنصر نفسه، بما في ذلك نصه وأطفاله. backdrop-filter يغير ما يظهر من خلال العنصر من الخلف، ويترك المحتوى الخاص بالعنصر &#39؛ حادًا.

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

إذا قمت بطمس البطاقة مع filter وتساءل لماذا العنوان غير قابل للقراءة، لقد استخدمت خاصية خاطئة. ال مولد مرشح CSS يغطي filter جانب الزوج.

كيف يعمل كل سطر من زجاج CSS؟

الخلفية هو الصبغة، وقناة ألفا الخاصة به هي الرقم الأكثر أهمية في الكتلة. rgba(255, 255, 255, 0.2) أبيض اللون بنسبة عتامة 20%. عند ألفا 1 تكون اللوحة صلبة ولا يظهر أي شيء من خلالها، وبالتالي فإن ضبابية الخلفية غير مرئية. عند ألفا 0 لا يوجد سطح على الإطلاق. يقع معظم الزجاج القابل للاستخدام بين 0.1 و0.4.

في المولد، هذا هو شريط تمرير الشفافية، وتحتاج التسمية إلى ملاحظة: يقوم شريط التمرير بتعيين عتامة التعبئة، وبالتالي فإن قيمة الشفافية الأعلى تجعل اللوحة أكثر صلابة. الشفافية 20% تكتب ألفا 0.2، و40% تكتب 0.4.

مرشح الخلفية هل الصقيع. blur(10px) يضبط نصف قطر التمويه المطبق على ما يقع خلفه. saturate(120%) يعزز لون تلك الخلفية غير الواضحة بنسبة 20%، مما يتعارض مع المظهر الرمادي الباهت الذي يميل التمويه بالإضافة إلى اللون الأبيض إلى إنتاجه. المولد &#39؛ يعمل شريط تمرير التمويه من 0 إلى 40 بكسل والتشبع من 100% إلى 200%.

النسخة البادئة موجود لأن إصدارات Safari الأقدم تفهم فقط -webkit-backdrop-filter. كتابة كلا السطرين بقيم متطابقة لا تكلف شيئًا وتغطي تلك الإصدارات.

نصف قطر الحدود يدور الزوايا من 0 إلى 50 بكسل في المولد. يتم قص التمويه إلى الشكل المستدير.

الحدود هو خط 1px من اللون الأبيض بنسبة عتامة 18%. يلفت الأنظار باعتباره أحد المعالم البارزة على الحافة الزجاجية ويكون أكثر أهمية على الخلفيات الداكنة، حيث قد تذوب حدود اللوحة. يقوم مربع الاختيار الخاص بالمولد &#39؛s بتشغيله أو إيقاف تشغيله؛ تم إصلاح اللون والعرض.

الظل 0 8px 32px rgba(0, 0, 0, 0.12) عبارة عن ظل عريض باهت يفصل اللوحة عن الصفحة. إذا كنت تريد ضبطه، فإن دليل الظل المربع يشرح الإزاحة والطمس والانتشار بعمق.

ماذا تنتج الإعدادات المسبقة للمولد؟

الإعدادات المسبقة هي نقاط بداية وليست تصميمات نهائية. يستخدم الخمسة جميعًا نصف قطر 16px، وجميعهم باستثناء Subtle يشملون الحدود.

تعيين مسبق	خلفية	مرشح الخلفية	حدود	أفضل ما في الأمر
متجمد	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	على	التدرجات الملونة والصور
ضوء	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	على	الصور المشغولة حيث يحتاج النص إلى مزيد من الدعم
مظلم	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	على	صور خفيفة، نص أبيض
نابض بالحياة	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	على	أقسام البطل المظلمة أو المشبعة
دقيق	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	عن	رقائق وشارات صغيرة

يتم تحميل المولد مع تحديد Frosted. انقر فوق إعداد مسبق، واضبط أشرطة التمرير ولون الصبغة، وسيتم تحديث كتلة التعليمات البرمجية أثناء السحب.

لماذا لا يعمل فلتر الخلفية الخاص بي؟

عندما يبدو أن التمويه لا يفعل شيئًا، فإن أحد هذه الأسباب دائمًا تقريبًا.

1. الخلفية معتمة. صلب background: #fff أو ألفا 1 يخفي الخلفية بالكامل. خفض ألفا.
2. لا يوجد شيء وراء ذلك لطمسه. على صفحة مسطحة أحادية اللون، يبدو اللون المسطح غير الواضح مطابقًا للون المسطح. يحتاج الزجاج إلى تدرج أو صورة أو أشكال خلفه. يتم وضع معاينة المولد &#39؛s عمدًا فوق تدرج بدوائر ملونة لهذا السبب؛ ال دليل التدرج CSS هو مصدر جيد للخلفيات التي تظهر التأثير بشكل جيد.
3. البادئة مفقودة. تتجاهل إصدارات Safari الأقدم الخاصية غير البادئة.
4. يحد السلف مما يمكن أن يراه المرشح. في مواصفات تأثيرات المرشح الحالية، توجد بعض الخصائص على السلف، مثل خصائصه الخاصة filter، أ opacity أقل من 1 أو آخر backdrop-filter، ابدأ جذر خلفية جديدًا، ويقوم التمويه فقط بأخذ عينات من المحتوى داخل هذا الجذر. إذا كان الزجاج موجودًا داخل غلاف يحتوي على أحد هذه العناصر، فحرك التأثير أو الخاصية.
5. اللوحة ليس لها حجم أو أنها شفافة تمامًا بطريقة أخرى. عنصر ذو ارتفاع صفر أو opacity: 0 على اللوحة يخفي التأثير مع اللوحة.

كيف يمكنك إبقاء النص قابلاً للقراءة على لوح زجاجي؟

يتطلب الزجاج القابل للقراءة عملاً أكثر من أي جزء آخر من النمط، لأن لون النص ثابت بينما الخلفية الموجودة أسفل اللوحة ليست كذلك. ال WCAG 2.2 الحد الأدنى للتباين يطلب نسبة لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. على لوحة شفافة، تعتمد هذه النسبة على ما هو موجود خلف كل جزء من اللوحة في تلك اللحظة.

مثال عملي يجعل هذا ملموسًا. يتم حساب نسبة التباين من النصوع النسبي للونين (L1 + 0.05) /(L2 + 0.05). مركبات تعبئة الزجاج فوق الخلفية: تصبح كل قناة ألفا مضروبة في التعبئة زائد (1 ناقص ألفا) مضروبًا في الخلفية. يقوم Blur بمتوسط وحدات البكسل المجاورة ولكنه يترك منطقة &#39؛s متوسط اللون تقريبًا حيث كان، لذلك على مساحة كبيرة من لون واحد، يعد المركب تقديرًا عادلاً.

يملأ	لون الخلفية	اللون المركب	على النقيض من النص الأبيض
متجمد، أبيض عند 0.2	أزرق #60A5FA	عن rgb(128, 183, 251)	حوالي 2.1:1
متجمد، أبيض عند 0.2	أصفر #FBBF24	عن rgb(252, 204, 80)	حوالي 1.5:1
مظلم، rgba(15, 23, 42, 0.25)	أزرق #60A5FA	عن rgb(76, 130, 198)	حوالي 4.0:1

خذ الصف الأول. الأحمر هو 0.2 x 255 + 0.8 x 96 = 127.8، والأخضر هو 0.2 x 255 + 0.8 x 165 = 183، والأزرق هو 0.2 x 255 + 0.8 x 250 = 251. هذا اللون &#39؛s النصوع النسبي يعمل بالقرب من 0.454، والأبيض&#39؛s هو 1، وبالتالي فإن النسبة هي 1.05 /0.504، حوالي 2.1:1. لا يمر أي منهما بالنسبة للنص الأساسي، ويصل الإعداد المسبق الداكن فوق اللون الأزرق إلى حوالي 4.0:1: وهو ما يكفي للنص الكبير، ولا يزال أقل من 4.5:1 بالنسبة للنص الصغير.

الإصلاحات العملية، حسب ترتيب الفعالية:

• ارفع ملء ألفا. يؤدي نقل الشفافية من 20% إلى 40% إلى إخفاء المزيد من الخلفية وتضييق النطاق الذي يتأرجح عبره التباين.
• أغمق لون النص الفاتح، أو تفتيحه للنص الداكن. الزجاج الداكن مع النص الأبيض يحمل خلفيات أكثر بكثير من الزجاج الأبيض مع النص الأبيض.
• زيادة التمويه. فهو يعمل على تنعيم التفاصيل عالية التباين، بحيث لا يقطعها خط أبيض رفيع خلف الحرف.
• إضافة ظل النص كملاذ أخير للعناوين. ال مولد الظل النصي يجعل واحدة ناعمة بسرعة.
• اختبار في أقصى الحدود. تحقق من التباين في المناطق الأكثر سطوعًا وظلامًا التي يمكن أن تجلس عليها اللوحة، باستخدام مدقق تباين الألوان، ليس في مكان واحد مناسب.

يغطي المولد &#39؛s المنسوخ CSS السطح الزجاجي فقط. النص الأبيض في المعاينة ليس جزءًا من الإخراج، لذا قم بتعيينه color على العنصر الخاص بك نفسك.

هل يضر مرشح الخلفية بالأداء؟

يمكن. تجبر ضبابية الخلفية المتصفح على قراءة وحدات البكسل الموجودة خلف العنصر وتشغيل التمويه عليها في كل مرة تتغير فيها تلك المنطقة. على بطاقة ثابتة رخيصة الثمن. على مساحة كبيرة، أثناء التمرير، أو عندما يتم تحريك المحتوى خلف اللوحة، يعد ذلك أحد التأثيرات الأكثر تكلفة للتركيب، وتظهره الهواتف ذات الطاقة المنخفضة أولاً كإطارات مسقطة.

المبادئ التوجيهية التي تبقيها تحت السيطرة:

• حافظ على الألواح الزجاجية متواضعة الحجم. يكلف التراكب المتجمد ذو إطار الرؤية الكامل أكثر بكثير من تكلفة البطاقة.
• تفضل أنصاف أقطار ضبابية أصغر. تنمو التكلفة مع نصف القطر، وبعد حوالي 20 بكسل يكون الفرق البصري صغيرًا.
• تجنب تحريك قيمة التمويه نفسها. تحريك opacity أو transform من اللوحة بدلا من ذلك.
• كن حذرًا مع الرؤوس اللاصقة الموجودة على محتوى التمرير الطويل، والتي يتم إعادة طمسها في كل إطار تمرير. اختبار على هاتف حقيقي متوسط المدى.

كيف يمكنك إضافة بديل للمتصفحات أو المستخدمين الذين يحتاجون إليه؟

تدعم الإصدارات الحالية من Chrome وEdge وFirefox وSafari backdrop-filter. تتجاهله المتصفحات القديمة جدًا وتظهر التعبئة شبه الشفافة بدون التمويه، والتي عند مستوى ألفا المنخفض يمكن أن تترك النص على خلفية مزدحمة. إضافتان صغيرتان تجعلان التأثير يتدهور جيدًا. يمكنك التحقق من جدول الدعم الحالي صفحة مرشح الخلفية MDN&#39؛s.

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

ال @supports تطبق الكتلة فقط الإصدار الشفاف حيث يوجد التمويه. ال prefers-reduced-transparency ميزة الوسائط، المحددة في استعلامات الوسائط المستوى 5، يتيح للمستخدمين الذين طلبوا من نظام التشغيل الخاص بهم قدرًا أقل من الشفافية الحصول على لوحة صلبة. لا يزال دعم المتصفح لميزة الوسائط هذه جزئيًا، لذا تعامل معه على أنه تحسين حيثما كان ذلك متاحًا وليس الضمان الوحيد.

التشكل الزجاجي مقابل التشكل الجديد مقابل التصميم المسطح

يعد Glassmorphism أحد أنماط الأسطح المتعددة، ولكل منها تكلفة مختلفة.

أسلوب	كيف يتم صنع السطح	Css الرئيسي	قوة	الخطر الرئيسي
التشكل الزجاجي	تعبئة شفافة بالإضافة إلى ضبابية الخلفية	background مع ألفا، backdrop-filter	العمق والسياق من الخلفية	يختلف التباين، ويكلف التمويه الأداء
نيومورفيسم	نفس لون الصفحة، مرفوعًا أو مضغوطًا بواسطة الظلال المقترنة	اثنين box-shadow طبقات	ضوابط ناعمة وملموسة	تباين منخفض جدًا بين التحكم والصفحة
شقة	حشوات صلبة، لا عمق لها	background	سريع ويمكن التنبؤ به	يمكن أن تشعر بالسهولة
ارتفاع نمط المواد	تعبئة صلبة بمستويات عمق الظل	box-shadow	مسح التسلسل الهرمي	جو أقل

إذا كان المظهر الناعم المبثوق أقرب إلى ما تريد، فإن مولد نيومورفيسم يبني الظلال المقترنة. تمزج العديد من الواجهات بين الأنماط: زجاج لشريط التنقل العائم فوق صورة البطل، وبطاقات مسطحة للمحتوى الكثيف أسفلها.

كيفية بناء بطاقة زجاجية، البدء في الانتهاء

1. افتح ال مولد CSS من الزجاج المصنفر واختر الإعداد المسبق الأقرب إلى خلفيتك: داكن للصور الفاتحة، أو متجمد أو فاتح للتدرجات الملونة.
2. قم بتعيين Blur عاليًا بدرجة كافية بحيث لا تتنافس تفاصيل الخلفية مع النص، عادةً من 8 إلى 16 بكسل.
3. ضبط الشفافية. ابدأ بنسبة 20% وارفعها حتى يمر النص بالتباين على الجزء الأكثر قسوة من الخلفية.
4. اختر صبغة باستخدام منتقي الألوان. صبغة مأخوذة من الخلفية &#39؛ تبدو اللوحة الخاصة أكثر طبيعية من اللون الأبيض النقي.
5. اضبط Radius ليتناسب مع بقية مكوناتك، وحافظ على Border على الخلفيات الداكنة.
6. انقر فوق نسخ CSS والصق الكتلة على فئة بطاقتك. يضيف color وحشو نفسك.
7. لف الكتلة في @supports قم بالرجوع أعلاه إذا كنت تدعم المتصفحات القديمة.

يعمل كل شيء في المولد في متصفحك، لذلك لا يتم تحميل أي شيء ويستمر في العمل دون اتصال بالإنترنت بعد تحميل الصفحة. بالنسبة لأدوات السطح والتأثير ذات الصلة، فإن محور أدوات CSS يسرد التدرجات والظلال والمرشحات والانتقالات في مكان واحد.