كيف يمكن عمل ستايل زجاجي للموقع

إنشاء مثل تلك الستايلات يحتاج إلى معرفة في في ال css و هذا ليتناسب مع ستايل الموقع الخاص بك، و يسمى الستايل الزجاجي بال Glassmorphism، و يكون هذا باستخدام backdrop-filter، حيث أن هذا الفلتر يتيح لك تطبيق تأثيرات مثل التمويه على العناصر التي خلف العنصر الحالي، و هذا كود بسيط لcss الذي يمكن أن يساعدك كبداية بعدها يمكنك تعديله حسب إحتياجاتك:

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  font-family: Arial, sans-serif;
}

/* تأثير الزجاج */
.glass {
  background: rgba(255, 255, 255, 0.2); 
  border-radius: 15px; 
  padding: 20px;
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff; 
  text-align: center;
  width: 300px; 
  max-width: 90%; 
}

على الرغم من أن الشكل الزجاجي كان موجودًا منذ بعض الوقت، إلا أن الويب لم يكن على دراية به حتى وقت قريب بسبب عدم كفاية دعم المتصفح لكن مع أحدث إضافات CSS مثل backdrop-filter، أصبح من الممكن الآن إضافة تأثيرات الشكل الزجاجي إلى صفحات الويب كالتالي:

أولاً: نستخدم بعض عناصر HTML كالتالي حتي نجعل الأمور بسيطه في الشرح.

  <div class="card">
    <p>This Is Paragraph</p>
  </div>

ثانياً: نقوم بإضافة بعض التصاميم الأساسيه في ملف ال CSS كالتالي: 

:root {
  font-size: 20px;
  box-sizing: inherit;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font: 1em/1.618 Inter, sans-serif;
  color: #224;
  background:
    url(path/to/image.format)
    center / cover no-repeat fixed;
  min-height: 100vh;
}

قُمنا بإضافة بعض التصاميم الأساسيه للصفحه وأيضاً قمنا بإضافة صوره كخلفيه للصفحه حتي يظهر التأثير بشكل أفضل (يمكنك إختيار أي صوره لديك). ايضا قمنا بإضافة (min-height: 100vh) حتي يشغل جسم الصفحه كل المساحه الرأسيه المتاحه وذلك للحصول على العرض الأمثل لبطاقتنا التي سنتطبق عليها التأثير.

ثالثاً: نقوم بإضافة بعض التصاميم علي البطاقه الخاصه بنا كالتالي:

.card {
  max-width: 500px;
  height: 300px;
  padding: 35px;
  display: flex; /* لتوسيط ما بداخل البطاقه في الاتجاهين الرأسي والأفقي */  
  flex-direction: column; /* لتوسيط ما بداخل البطاقه في الاتجاهين الرأسي والأفقي */ 
  justify-content: space-between; /* لتوسيط ما بداخل البطاقه في الاتجاهين الرأسي والأفقي */
  background-color: rgba(255, 255, 255, .45); /* نضيف اللون الأبيض كخلفية بنسبة تعبئة تبلغ 45 بالمائة */
  border-radius: 20px; /* بعض الإستداره لزوايا البطاقه */
  border: 1px solid rgba(255, 255, 255, .25); /* نضيف حدود للبطاقه مع شفافيه 25  */
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); /* نضيف هذه الخاصيه حتي نجعل البطاقه تظهر وكأنها تطفو علي السطح */
}

  رابعاً: نقوم بإستخدام خاصية (backdrop-filter) وذلك لتطبيق تأثير التمويه على المنطقة خلف البطاقه بحيث تظهر مثل الزجاج المصنفر (يٌمكنك التحكم في مدي الضباضبيه كما تريد ولكن أري أن 15px جيده) كالتالي:

.card {
  ....
  backdrop-filter: blur(15px);
}

في النهايه هذا الأساس الذي تحتاجه ومن خلال قليل من البحث يُمكنك التعمق أكثر وإضافة تحسينات أكثر كما تريد.

بالتوفيق.