من الخيال إلى الواقع تصميم واجهات تفاعلية باستخدام تقنيات CSS المتقدمة

هذا الكود هو جزء من ملف CSS يُستخدم لتنسيق عناصر واجهة المستخدم، وخاصةً العناصر التي تحتوي على فئة .card. الكود يعتمد على تقنيات متقدمة في CSS مثل emix-blend-mode و background-blend-mode لإنشاء تأثيرات بصرية معقدة. سأشرح الكود بالتفصيل:

 الامثلة:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

1. HTML

   	
   <div class="card"></div>
        

2. CSS

   
     .card {
   	overflow: hidden;
   	position: relative;
   	height: 300px;
   	margin: 10px;
   	border-radius: 8px;
   	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
   	background: linear-gradient(to left top, #337AB7, #BFE2FF);
   }
   .card:before, .card:after {
   	position: absolute;
   	top: 0;
   	right: 0;
   	bottom: 0;
   	left: 0;
   	z-index: 0;
   	content: "";
   }
   .card:before {
   	filter: contrast(19);
   	mix-blend-mode: multiply;
   }
   .card:after {
   	background: linear-gradient(90deg, #285f8f, #337AB7);
   	mix-blend-mode: screen;
   } 

وبعد ذلك نضيف الخيار المطلوب

      .card:before {
	background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000);
	background-blend-mode: screen;
}
      

      .card:before {
	background: repeating-radial-gradient(circle at 0 50%, #000, #999, #000 5%), radial-gradient(circle at 0 50%, #777, #000);
	background-blend-mode: screen;
}
      

      .card:before {
	background: repeating-conic-gradient(at -9% 25%, #000, #999, #000 2.5%), conic-gradient(at -9% 25%, #000, #777 50%);
	background-blend-mode: screen;
}
      

      .card:before {
	background: repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%), linear-gradient(30deg, #777, #000);
	background-blend-mode: screen;
}
      

      .card:before {
	background: linear-gradient(#777, #000), repeating-radial-gradient(circle at -35% 0, #000, #999, #000 5%), repeating-radial-gradient(circle at -35% 100%, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      

      .card:before {
	background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      

      .card:before {
	background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-conic-gradient(#000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      

  .card:before {
	background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-radial-gradient(circle at 100% 50%, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      

      .card:before {
	background: radial-gradient(circle, #777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      

      .card:before {
	background: conic-gradient(#777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      

     .card:before {
	background: radial-gradient(circle, #000, #666 70%), radial-gradient(circle, #000, #fff, #000 71%) 0 0/2em 2em round, radial-gradient(circle, #000, #fff, #000 71%) 1em 1em/2em 2em round;
	background-blend-mode: difference;
} 
      

      .card:before {
	background: linear-gradient(-15deg, #000, #666), radial-gradient(circle, #fff, #000 65%) 0 0/2em 2em round, radial-gradient(circle, #000, #fff, #000 65%) 1em 1em/2em 2em round;
	background-blend-mode: difference;
}
      

      .card:before {
	background: linear-gradient(#777, #000), radial-gradient(circle, #000, #999, #000 65%) 0 0/2em 2em round, radial-gradient(circle, #000, #999, #000 65%) 1em 1em/2em 2em round;
	background-blend-mode: screen, difference;
}
      

      .card:before {
	background: conic-gradient(at 0 50%, #777, #000), repeating-radial-gradient(circle at 0 0, #000, #999, #000 5%), repeating-conic-gradient(at -5% 50%, #000, #999, #000 5%);
	background-blend-mode: screen, difference;
}
      

      .card:before {
	background: repeating-linear-gradient(45deg, #000, #999, #000 5%) 0/50% no-repeat, repeating-linear-gradient(-45deg, #000, #999, #000 5%) 100%/50% no-repeat, linear-gradient(#777, #000);
	background-blend-mode: screen;
}
      

      .card:before {
	background: radial-gradient(circle, #888, #000), repeating-radial-gradient(circle at 0 100%, #000, #888, #000 5%) 0 0/100% 50% no-repeat, repeating-radial-gradient(circle at 100% 0, #000, #888, #000 5%) 0 100%/100% 50% no-repeat;
	background-blend-mode: screen;
}
      

      .card:before {
	background: radial-gradient(#000, #fff 70%) 0.75em 0.75em, conic-gradient(from -90deg at 15% 50%, #fff, #000 5% 30%, #fff 35%), conic-gradient(at 50% 15%, #fff, #000 5% 30%, #fff 35%), conic-gradient(from 90deg at 85% 50%, #fff, #000 5% 30%, #fff 35%), conic-gradient(from 180deg at 50% 85%, #fff, #000 5% 30%, #fff 35%);
	background-size: 1.5em 1.5em;
	background-blend-mode: difference, multiply, multiply, multiply;
}
      

      .card:before {
	background: linear-gradient(#777, #000), repeating-conic-gradient(#ddd, #000 12.5% 37.5%, #ddd 50%) 0/1em 1em;
	background-blend-mode: screen;
}
      

      .card:before {
	background: radial-gradient(circle, #000, #777), repeating-radial-gradient(circle, #ddd, #000, #ddd 5%), repeating-conic-gradient(#ddd, #000, #ddd 5%);
	background-blend-mode: screen, difference;
}
      

      .card:before {
	background: repeating-linear-gradient(45deg, #000, #666, #000 20%), repeating-radial-gradient(circle, #ddd, #000, #ddd 5%), repeating-conic-gradient(#ddd, #000, #ddd 5%);
	background-blend-mode: screen, difference;
}
      

شرح الاكواد

1. تنسيق العنصر span داخل .card:

    
       .card span {
       font-size: 18px;
       color: #FFF;
       padding: 6px;
       position: absolute;
       top: 12px;
       left: 12px;
       background: rgba(0,0,0,0.7);
       border-radius: 50%;
       width: 48px;
       height: 48px;
       line-height: 28px;
       text-align: center;
       border: 3px solid #BFE2FF;
       box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
       font-weight: bold;
   }

   شرح الكود

   • يتم تنسيق العنصر span داخل العناصر التي تحتوي على فئة .card.

   • النص داخل span يكون بحجم 18 px ولونه أبيض #FFF.

   • يتم إضافة padding بقيمة 6 px حول النص.

   • يتم تحديد موضع span بشكل مطلق position: absolute بالنسبة للعنصر الأب .card، ويتم وضعه على بعد 12 px من الأعلى واليسار.

   • الخلفية تكون شبه شفافة rgba(0,0,0,0.7) مع حواف دائرية border-radius: 50%.

   • الأبعاد الثابتة للعنصر هي 48 px عرضًا وارتفاعًا.

   • يتم توسيط النص رأسيًا باستخدام line-height وأفقيًا باستخدام text-align: center.

   • يتم إضافة حدود زرقاء #BFE2FF بسمك 3 px وظل خفيف حول العنصر.

   • النص يكون عريضًا font-weight: bold.

2. العناصر الزائفة :before و :after للـ .card:

   
           .card:before, .card:after {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       z-index: 0;
       content: "";
   }

   شرح الكود

   • يتم إنشاء عناصر زائفة :before و :after لكل عنصر يحتوي على فئة .card.

   • هذه العناصر الزائفة تغطي مساحة العنصر الأب بالكامل top: 0, right: 0, bottom: 0, left: 0.

   • يتم وضعها خلف المحتوى الفعلي للعنصر باستخدام z-index: 0.

   • content: "" مطلوب لعرض العناصر الزائفة.

3. تخصيص العنصر الزائف :before:

   .

     
           card:before {
       filter: contrast(19);
       mix-blend-mode: multiply;
   }

   شرح الكود

   • يتم تطبيق فلتر contrast لزيادة التباين.
   • يتم استخدام mix-blend-mode: multiply لدمج الخلفية مع العناصر الأخرى.

4. تخصيص العنصر الزائف :after:

   
         .card:after {
       background: linear-gradient(90deg, #285f8f, #337AB7);
       mix-blend-mode: screen;
   }

   شرح الكود

   • يتم إنشاء خلفية متدرجة linear-gradient من الأزرق الغامق إلى الأزرق الفاتح.
   • يتم استخدام mix-blend-mode: screen لدمج الخلفية مع العناصر الأخرى.

5. تخصيص خلفيات مختلفة لكل .card:

   يتم استخدام :nth-child لتطبيق خلفيات مختلفة لكل عنصر .card بناءً على ترتيبه. على سبيل المثال:

   
    .card:nth-child(1):before {
       background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000);
       background-blend-mode: screen;
   }

   شرح الكود

   • يتم تطبيق خلفية متكررة repeating-linear-gradient وخلفية متدرجة linear-gradient للعنصر الأول .card:nth-child(1).

   • يتم دمج الخلفيات باستخدام background-blend-mode: screen.

6. تأثيرات متقدمة باستخدام background-blend-mode و mix-blend-mode:

   الكود يستخدم تقنيات متقدمة لإنشاء تأثيرات بصرية معقدة، مثل:

   • background-blend-mode: لدمج عدة خلفيات معًا.

   • mix-blend-mode: لدمج العناصر مع الخلفيات أو العناصر الأخرى.

7. أمثلة على الخلفيات:

   • خلفيات متكررة:

     
      .card:nth-child(1):before {
         background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000);
     }

     يتم إنشاء خلفية متكررة بزاوية 45 درجة.

   • خلفيات دائرية:

     
        .card:nth-child(2):before {
         background: repeating-radial-gradient(circle at 0 50%, #000, #999, #000 5%), radial-gradient(circle at 0 50%, #777, #000);
     }

     يتم إنشاء خلفية دائرية متكررة.

   • خلفيات مخروطية:

     
       .card:nth-child(3):before {
         background: repeating-conic-gradient(at -9% 25%, #000, #999, #000 2.5%), conic-gradient(at -9% 25%, #000, #777 50%);
     }

     يتم إنشاء خلفية مخروطية متكررة.

8. استخدام background-blend-mode مع عدة خلفيات:

   
    .card:nth-child(5):before {
       background: linear-gradient(#777, #000), repeating-radial-gradient(circle at -35% 0, #000, #999, #000 5%), repeating-radial-gradient(circle at -35% 100%, #000, #999, #000 5%);
       background-blend-mode: screen, difference;
   }

   شرح الكود

   • يتم دمج عدة خلفيات باستخدام background-blend-mode مع وضعيات مختلفة screen, difference.

9. تأثيرات متقدمة أخرى:

   الكود يحتوي على العديد من التأثيرات المتقدمة مثل:

   • تدرجات خطية ودائرية ومخروطية.

   • دمج الخلفيات باستخدام difference و multiply.

   • تطبيق ظلال وألوان متعددة.

الخلاصة:

هذا الكود يستخدم تقنيات CSS متقدمة لإنشاء تأثيرات بصرية معقدة ومتنوعة لعناصر .card. يتم استخدام :before و :after لإنشاء خلفيات متداخلة، و background-blend-mode و mix-blend-mode لدمج الخلفيات معًا. كل عنصر .card يحصل على خلفية فريدة بناءً على ترتيبه باستخدام :nth-child.