كيفية إنشاء حدود منحنية للكتل في CSS

إذا كنت بحاجة إلى جعل حدود الهيدر أو الفوتر مائلة، يكفي أن تطبق على العنصر خاصية CSS تسمى clip-path بقيمة polygon()، والتي تحدد مضلعًا باستخدام قاعدة تعبئة SVG ومجموعة من النقاط.

مبدأ عمل clip-path: polygon:

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

الآن دعونا نغير النقطة "2" وننقلها على طول المحور y بنسبة 10%:

شرح خاصية clip-path: polygon()

الكود clip-path: polygon() هو أحد خصائص CSS التي تُستخدم لقص العناصر إلى أشكال محددة باستخدام مضلعات (polygons). هذه الخاصية تسمح لك بتحديد شكل معين عن طريق إعطاء قائمة من النقاط (إحداثيات X وY) لتحديد حواف الشكل.

كيف يعمل clip-path: polygon()؟

تأخذ الخاصية clip-path: polygon() قائمة من النقاط، حيث يتم تحديد كل نقطة بإحداثيات X وY.

• يتم رسم خطوط بين هذه النقاط لتشكيل مضلع (شكل مغلق).
• الجزء الموجود داخل المضلع يظل مرئيًا، بينما يتم إخفاء الجزء الموجود خارج المضلع.

صيغة الكود:

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

• x1 y1: الإحداثيات الأولى للنقطة.
• x2 y2: الإحداثيات الثانية للنقطة.
• x3 y3: الإحداثيات الثالثة للنقطة.
• يمكنك إضافة عدد غير محدود من النقاط لإنشاء أشكال معقدة.

أهمية clip-path: polygon()

• إنشاء أشكال معقدة: تسمح لك بإنشاء أشكال غير منتظمة مثل المثلثات، النجوم، أو أي شكل هندسي معقد.
• تحسين التصميم: تضيف لمسة إبداعية إلى التصميمات، خاصة في إنشاء تأثيرات بصرية مميزة.
• التحكم الدقيق في القص: تتيح لك التحكم الدقيق في كيفية قص العناصر، مما يسمح بإنشاء تصميمات ديناميكية وجذابة.
• دعم متصفحات حديثة: مدعومة في المتصفحات الحديثة مثل Chrome, Firefox, Safari, وEdge.

أمثلة على استخدام clip-path: polygon()

مثلث:

.box { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

شكل مائل:

.box { clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%); }

نجمة:

.box { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

شكل سداسي:

.box { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }

فوائد استخدام clip-path: polygon()

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

مثال عملي:

.box { width: 300px; height: 300px; background-color: orange; clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%); }

أمثلة اخري clip-path: polygon()

1. مثال Header (1)

   في ترميز HTML، يتم في معظم الأمثلة استخدام عنصر div بفئة block، مع تغيير أنماط CSS.

   
     <div class="block">
   	...
   </div>
   

   
       .block {
   	background: #4380db;
   	color: #fff;
   	padding: 60px 40px;
   	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
   }
       
   

   هذا الكود يتكون من جزأين رئيسيين: جزء HTML وجزء CSS. دعنا نشرح كل جزء على حدة.

   1. الجزء الخاص بـــ HTML:

      
          <div class="block">
      	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
      	<p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
      	<p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
      	<p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
      	<p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
      	<p>Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.</p>
      	<p>Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.</p>
      </div>
      

      • <div class="block">: هذا عنصر div يحتوي على عدة فقرات (<p>). يتم استخدام هذا العنصر لتجميع الفقرات معًا وتطبيق التنسيق عليها باستخدام CSS.
      • <p>: كل فقرة تحتوي على نص عشوائي (Lorem Ipsum) يستخدم عادة كنص بديل في التصميم.

   2. الجزء الخاص بـــ Css:

      
          body {
      	background-color: #eee;
      }
      p {
      	padding: 0 0 15px 0;
      	margin: 0;
      }
      
      .block {
      	background: #4380db;
      	color: #fff;
      	padding: 60px 40px;
      	column-width: 48%;
      	column-count: 2;
      	column-gap: 4%;
      	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
      }
      

      • body: يتم تعيين لون خلفية الصفحة إلى اللون الرمادي الفاتح (#eee).
      • p: يتم تطبيق التنسيق على جميع الفقرات (<p>):
        • padding: 0 0 15px 0;: يتم إضافة حشوة (padding) أسفل كل فقرة بمقدار 15 بكسل.
        • margin: 0;: يتم إزالة الهوامش (margin) من الفقرات.
   3. .block: يتم تطبيق التنسيق على العنصر الذي يحتوي على الكلاس block:
      • background: #4380db;: يتم تعيين لون الخلفية إلى الأزرق (#4380db).
      • color: #fff;: يتم تعيين لون النص إلى الأبيض (#fff).
      • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
      • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
      • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
      • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.
      • clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);: يتم قص العنصر بشكل مائل من الأسفل باستخدام شكل مضلع (polygon). النقاط المحددة في polygon تقوم بإنشاء شكل مائل حيث الجزء العلوي من العنصر يبقى مستطيلاً بينما الجزء السفلي يتم قطعه بشكل مائل.

   النتيجة:

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

   معاينة

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

   Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.

   Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.

2. مثال Header (2)

   شرح الكود

   هذا الكود يتكون من جزأين رئيسيين: جزء HTML وجزء CSS. دعنا نشرح كل جزء بالتفصيل:

   جزء HTML:

   
   <div class="block">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
       <p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
       <p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
       <p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
       <p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
       <p>Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.</p>
       <p>Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.</p>
   </div>
   

   <div class="block">:

   • هذا عنصر div يستخدم لتجميع المحتوى (الفقرات) معًا.
   • يتم تطبيق تنسيقات CSS عليه باستخدام الكلاس block.

   <p>:

   • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum)، وهو نص بديل يُستخدم في التصميم لعرض الشكل العام للنصوص.

   جزء css:

   
   body {
       background-color: #eee;
   }
   p {
       padding: 0 0 15px 0;
       margin: 0;
   }
   
   .block {
       background: #4380db;
       color: #fff;
       padding: 60px 40px;
       column-width: 48%;
       column-count: 2;
       column-gap: 4%;
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
   }
   

   body:

   • يتم تعيين لون خلفية الصفحة إلى اللون الرمادي الفاتح (#eee).

   p:

   • يتم تطبيق التنسيقات على جميع الفقرات (<p>):
   • padding: 0 0 15px 0;: يتم إضافة حشوة (padding) أسفل كل فقرة بمقدار 15 بكسل.
   • margin: 0;: يتم إزالة الهوامش (margin) من الفقرات.

   .block:

   • يتم تطبيق التنسيقات على العنصر الذي يحتوي على الكلاس block:
   • background: #4380db;: يتم تعيين لون الخلفية إلى الأزرق (#4380db).
   • color: #fff;: يتم تعيين لون النص إلى الأبيض (#fff).
   • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
   • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
   • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
   • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.
   • clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);: يتم قص العنصر بشكل مائل من الأسفل باستخدام شكل مضلع (polygon). النقاط المحددة في polygon تقوم بإنشاء شكل مائل حيث الجزء العلوي من العنصر يبقى مستطيلاً بينما الجزء السفلي يتم قطعه بشكل مائل.

   النتيجة:

   عند تطبيق هذا الكود، ستحصل على:

   1. خلفية الصفحة: رمادية فاتحة (#eee).
   2. قسم أزرق اللون:
      • يحتوي على نص أبيض مقسم إلى عمودين.
      • الجزء السفلي من القسم يتم قطعه بشكل مائل، مما يعطي مظهرًا تصميميًا مميزًا.
   3. الفقرات:
      • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum).
      • يتم إضافة حشوة أسفل كل فقرة بمقدار 15 بكسل.

   التعديلات الجديدة في هذا الكود:

   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);:

   • تم تعديل شكل القص المائل في الجزء السفلي من العنصر. في هذا الكود، الجزء السفلي الأيمن يبقى مستقيمًا (100% 100%)، بينما الجزء السفلي الأيسر يتم قطعه بشكل مائل (0 90%).

   ملاحظة:

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

   معاينة

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

   Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.

   Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.

3. مثال Content (1)

   شرح الكود

   هذا الكود يتكون من جزأين رئيسيين: جزء HTML وجزء CSS. دعنا نشرح كل جزء بالتفصيل:

   جزء HTML:

   
   <div class="block">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
       <p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
       <p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
       <p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
       <p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
       <p>Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.</p>
       <p>Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.</p>
   </div>
   

   <div class="block">:

   • هذا عنصر div يستخدم لتجميع المحتوى (الفقرات) معًا.
   • يتم تطبيق تنسيقات CSS عليه باستخدام الكلاس block.

   <p>:

   • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum)، وهو نص بديل يُستخدم في التصميم لعرض الشكل العام للنصوص.

   جزء css:

   
   body {
       background-color: #eee;
   }
   p {
       padding: 0 0 15px 0;
       margin: 0;
   }
   
   .block {
       background-color: #2c681d;
       color: #fff;
       padding: 60px 40px;
       column-width: 48%;
       column-count: 2;
       column-gap: 4%;
       clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);
   }
   

   body:

   • يتم تعيين لون خلفية الصفحة إلى اللون الرمادي الفاتح (#eee).

   p:

   • يتم تطبيق التنسيقات على جميع الفقرات (<p>):
   • padding: 0 0 15px 0;: يتم إضافة حشوة (padding) أسفل كل فقرة بمقدار 15 بكسل.
   • margin: 0;: يتم إزالة الهوامش (margin) من الفقرات.

   .block:

   • يتم تطبيق التنسيقات على العنصر الذي يحتوي على الكلاس block:
   • background-color: #2c681d;: يتم تعيين لون الخلفية إلى الأخضر الداكن (#2c681d).
   • color: #fff;: يتم تعيين لون النص إلى الأبيض (#fff).
   • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
   • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
   • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
   • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.
   • clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);: يتم قص العنصر بشكل مائل من الأسفل باستخدام شكل مضلع (polygon). النقاط المحددة في polygon تقوم بإنشاء شكل مائل حيث الجزء العلوي من العنصر يبقى مستطيلاً بينما الجزء السفلي يتم قطعه بشكل مائل.

   النتيجة:

   عند تطبيق هذا الكود، ستحصل على:

   1. خلفية الصفحة: رمادية فاتحة (#eee).
   2. قسم أخضر داكن:
      • يحتوي على نص أبيض مقسم إلى عمودين.
      • الجزء السفلي من القسم يتم قطعه بشكل مائل، مما يعطي مظهرًا تصميميًا مميزًا.
   3. الفقرات:
      • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum).
      • يتم إضافة حشوة أسفل كل فقرة بمقدار 15 بكسل.

   ملاحظة:

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

   معاينــة

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

   Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.

   Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.

4. مثال Content (2)

   شرح الكود

   هذا الكود يتكون من جزأين رئيسيين: جزء HTML وجزء CSS. دعنا نشرح كل جزء بالتفصيل:

   جزء HTML:

   
   <div class="block">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
       <p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
       <p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
       <p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
       <p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
       <p>Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.</p>
       <p>Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.</p>
   </div>
   

   <div class="block">:

   • هذا عنصر div يستخدم لتجميع المحتوى (الفقرات) معًا.
   • يتم تطبيق تنسيقات CSS عليه باستخدام الكلاس block.

   <p>:

   • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum)، وهو نص بديل يُستخدم في التصميم لعرض الشكل العام للنصوص.

   جزء Css:

   
   body {
       background-color: #eee;
   }
   p {
       padding: 0 0 15px 0;
       margin: 0;
   }
   
   .block {
       background-color: #2c681d;
       color: #fff;
       padding: 60px 40px;
       column-width: 48%;
       column-count: 2;
       column-gap: 4%;
       clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
   }
   

   body:

   • يتم تعيين لون خلفية الصفحة إلى اللون الرمادي الفاتح (#eee).

   p:

   • يتم تطبيق التنسيقات على جميع الفقرات (<p>):
   • padding: 0 0 15px 0;: يتم إضافة حشوة (padding) أسفل كل فقرة بمقدار 15 بكسل.
   • margin: 0;: يتم إزالة الهوامش (margin) من الفقرات.

   .block:

   • يتم تطبيق التنسيقات على العنصر الذي يحتوي على الكلاس block:
   • background-color: #2c681d;: يتم تعيين لون الخلفية إلى الأخضر الداكن (#2c681d).
   • color: #fff;: يتم تعيين لون النص إلى الأبيض (#fff).
   • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
   • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
   • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
   • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.
   • clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);: يتم قص العنصر بشكل مائل من الأعلى والأسفل باستخدام شكل مضلع (polygon). النقاط المحددة في polygon تقوم بإنشاء شكل مائل حيث الجزء العلوي من العنصر يتم قطعه بشكل مائل إلى اليمين، والجزء السفلي يتم قطعه بشكل مائل إلى اليسار.

   النتيجة:

   عند تطبيق هذا الكود، ستحصل على:

   1. خلفية الصفحة: رمادية فاتحة (#eee).
   2. قسم أخضر داكن:
      • يحتوي على نص أبيض مقسم إلى عمودين.
      • الجزء العلوي من القسم يتم قطعه بشكل مائل إلى اليمين، والجزء السفلي يتم قطعه بشكل مائل إلى اليسار، مما يعطي مظهرًا تصميميًا مميزًا.
   3. الفقرات:
      • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum).
      • يتم إضافة حشوة أسفل كل فقرة بمقدار 15 بكسل.

   ملاحظة:

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

   معاينــة

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

   Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.

   Cras in lectus vitae magna egestas viverra et ut erat. Fusce varius velit eget arcu tincidunt, vitae egestas felis tempus.

5. مثال Content (3)

   شرح الكود

   هذا الكود يتكون من جزأين رئيسيين: جزء HTML وجزء CSS. دعنا نشرح كل جزء بالتفصيل:

   جزء HTML:

   
   <div class="block-1">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
       <p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
       <p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
       <p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
       <p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
   </div>
   
   <div class="block-2">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
       <p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
       <p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
       <p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
       <p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
   </div>
         

   <div class="block-1"> و <div class="block-2">:

   • هذان عنصران div يستخدمان لتجميع المحتوى (الفقرات) معًا.
   • يتم تطبيق تنسيقات CSS مختلفة على كل قسم باستخدام الكلاسات block-1 وblock-2.

   <p>:

   • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum)، وهو نص بديل يُستخدم في التصميم لعرض الشكل العام للنصوص.

   جزء Css:

   
   body {
       background-color: #eee;
   }
   p {
       padding: 0 0 15px 0;
       margin: 0;
   }
   
   .block-1 {
       background: #2c681d;
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
       padding: 60px 40px;
       color: #fff;
       column-width: 48%;
       column-count: 2;
       column-gap: 4%;
       margin-bottom: -5vw;
   }
   .block-2 {
       background: #ff9d2f;
       padding: 60px 40px;
       color: #000;
       column-width: 48%;
       column-count: 2;
       column-gap: 4%;
   }
   

   body:

   • يتم تعيين لون خلفية الصفحة إلى اللون الرمادي الفاتح (#eee).

   p:

   • يتم تطبيق التنسيقات على جميع الفقرات (<p>):
   • padding: 0 0 15px 0;: يتم إضافة حشوة (padding) أسفل كل فقرة بمقدار 15 بكسل.
   • margin: 0;: يتم إزالة الهوامش (margin) من الفقرات.

   .block-1:

   • يتم تطبيق التنسيقات على العنصر الذي يحتوي على الكلاس block-1:
   • background: #2c681d;: يتم تعيين لون الخلفية إلى الأخضر الداكن (#2c681d).
   • clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));: يتم قص العنصر بشكل مائل من الأسفل باستخدام شكل مضلع (polygon). النقاط المحددة في polygon تقوم بإنشاء شكل مائل حيث الجزء السفلي من العنصر يتم قطعه بشكل مائل.
   • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
   • color: #fff;: يتم تعيين لون النص إلى الأبيض (#fff).
   • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
   • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
   • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.
   • margin-bottom: -5vw;: يتم إنشاء تداخل مع القسم التالي عن طريق إضافة هامش سلبي.

   .block-2:

   • يتم تطبيق التنسيقات على العنصر الذي يحتوي على الكلاس block-2:
   • background: #ff9d2f;: يتم تعيين لون الخلفية إلى البرتقالي (#ff9d2f).
   • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
   • color: #000;: يتم تعيين لون النص إلى الأسود (#000).
   • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
   • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
   • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.

   النتيجة:

   عند تطبيق هذا الكود، ستحصل على:

   1. خلفية الصفحة: رمادية فاتحة (#eee).
   2. قسم أخضر داكن:
      • يحتوي على نص أبيض مقسم إلى عمودين.
      • الجزء السفلي من القسم يتم قطعه بشكل مائل، مما يعطي مظهرًا تصميميًا مميزًا.
   3. قسم برتقالي:
      • يحتوي على نص أسود مقسم إلى عمودين.
      • يتداخل مع القسم الأخضر الداكن بسبب الهامش السلبي.

   ملاحظة:

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

   معاينــة

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

6. مثال Footer (1)

   شرح الكود

   هذا الكود يتكون من جزأين رئيسيين: جزء HTML وجزء CSS. دعنا نشرح كل جزء بالتفصيل:

   جزء HTML:

   
   <div class="block">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
       <p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
       <p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
       <p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
       <p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
       <p>Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.</p>
   </div>
   

   <div class="block">:

   • هذا عنصر div يستخدم لتجميع المحتوى (الفقرات) معًا.
   • يتم تطبيق تنسيقات CSS عليه باستخدام الكلاس block.

   <p>:

   • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum)، وهو نص بديل يُستخدم في التصميم لعرض الشكل العام للنصوص.

   جزء Css:

   
   body {
       background-color: #eee;
   }
   p {
       padding: 0 0 15px 0;
       margin: 0;
   }
   
   .block {
       background: #db4343;
       color: #fff;
       padding: 60px 40px;
       column-width: 48%;
       column-count: 2;
       column-gap: 4%;
       clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0 100%);
   }
   

   body:

   • يتم تعيين لون خلفية الصفحة إلى اللون الرمادي الفاتح (#eee).

   p:

   • يتم تطبيق التنسيقات على جميع الفقرات (<p>):
   • padding: 0 0 15px 0;: يتم إضافة حشوة (padding) أسفل كل فقرة بمقدار 15 بكسل.
   • margin: 0;: يتم إزالة الهوامش (margin) من الفقرات.

   .block:

   • يتم تطبيق التنسيقات على العنصر الذي يحتوي على الكلاس block:
   • background: #db4343;: يتم تعيين لون الخلفية إلى الأحمر (#db4343).
   • color: #fff;: يتم تعيين لون النص إلى الأبيض (#fff).
   • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
   • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
   • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
   • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.
   • clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0 100%);: يتم قص العنصر بشكل مائل من الأعلى باستخدام شكل مضلع (polygon). النقاط المحددة في polygon تقوم بإنشاء شكل مائل حيث الجزء العلوي من العنصر يتم قطعه بشكل مائل إلى اليمين.

   النتيجة:

   عند تطبيق هذا الكود، ستحصل على:

   1. خلفية الصفحة: رمادية فاتحة (#eee).
   2. قسم أحمر:
      • يحتوي على نص أبيض مقسم إلى عمودين.
      • الجزء العلوي من القسم يتم قطعه بشكل مائل إلى اليمين، مما يعطي مظهرًا تصميميًا مميزًا.
   3. الفقرات:
      • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum).
      • يتم إضافة حشوة أسفل كل فقرة بمقدار 15 بكسل.

   ملاحظة:

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

   معاينــة

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

   Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.

7. مثال Footer (2)

   شرح الكود

   هذا الكود يتكون من جزأين رئيسيين: جزء HTML وجزء CSS. دعنا نشرح كل جزء بالتفصيل:

   جزء HTML:

   
   <div class="block">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.</p>
       <p>Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
       <p>Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.</p>
       <p>Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.</p>
       <p>Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.</p>
       <p>Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.</p>
   </div>
   

   <div class="block">:

   • هذا عنصر div يستخدم لتجميع المحتوى (الفقرات) معًا.
   • يتم تطبيق تنسيقات CSS عليه باستخدام الكلاس block.

   <p>:

   • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum)، وهو نص بديل يُستخدم في التصميم لعرض الشكل العام للنصوص.

   جزء Css:

   
   body {
       background-color: #eee;
   }
   p {
       padding: 0 0 15px 0;
       margin: 0;
   }
   
   .block {
       background: #db4343;
       background-size: cover;
       color: #fff;
       padding: 60px 40px;
       column-width: 48%;
       column-count: 2;
       column-gap: 4%;
       clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0 100%);
   }
   

   body:

   • يتم تعيين لون خلفية الصفحة إلى اللون الرمادي الفاتح (#eee).

   p:

   • يتم تطبيق التنسيقات على جميع الفقرات (<p>):
   • padding: 0 0 15px 0;: يتم إضافة حشوة (padding) أسفل كل فقرة بمقدار 15 بكسل.
   • margin: 0;: يتم إزالة الهوامش (margin) من الفقرات.

   .block:

   • يتم تطبيق التنسيقات على العنصر الذي يحتوي على الكلاس block:
   • background: #db4343;: يتم تعيين لون الخلفية إلى الأحمر (#db4343).
   • background-size: cover;: يتم ضبط حجم الخلفية لتغطية العنصر بالكامل (على الرغم من عدم وجود صورة خلفية هنا، فإن هذه الخاصية تكون مفيدة عند استخدام صور خلفية).
   • color: #fff;: يتم تعيين لون النص إلى الأبيض (#fff).
   • padding: 60px 40px;: يتم إضافة حشوة داخلية بمقدار 60 بكسل من الأعلى والأسفل و40 بكسل من الجانبين.
   • column-width: 48%;: يتم تعيين عرض الأعمدة إلى 48% من عرض العنصر.
   • column-count: 2;: يتم تقسيم المحتوى إلى عمودين.
   • column-gap: 4%;: يتم تعيين الفجوة بين الأعمدة إلى 4% من عرض العنصر.
   • clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0 100%);: يتم قص العنصر بشكل مائل من الأعلى باستخدام شكل مضلع (polygon). النقاط المحددة في polygon تقوم بإنشاء شكل مائل حيث الجزء العلوي من العنصر يتم قطعه بشكل مائل إلى اليمين.

   النتيجة:

   عند تطبيق هذا الكود، ستحصل على:

   1. خلفية الصفحة: رمادية فاتحة (#eee).
   2. قسم أحمر:
      • يحتوي على نص أبيض مقسم إلى عمودين.
      • الجزء العلوي من القسم يتم قطعه بشكل مائل إلى اليمين، مما يعطي مظهرًا تصميميًا مميزًا.
   3. الفقرات:
      • كل فقرة تحتوي على نص عشوائي (Lorem Ipsum).
      • يتم إضافة حشوة أسفل كل فقرة بمقدار 15 بكسل.

   ملاحظة:

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

   معاينــة

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper.

   Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.

   Curabitur malesuada neque eu neque suscipit, sit amet efficitur lorem pharetra. Curabitur et risus eu lacus lacinia convallis.

   Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus a erat rutrum blandit.

   Vivamus sodales erat sit amet nibh elementum egestas. Mauris ultrices augue nec aliquet pharetra.

   Integer volutpat metus ut ullamcorper egestas. Aliquam eu nulla suscipit, placerat orci sit amet, pharetra tortor.

الخلاصة:

clip-path: polygon() هي أداة قوية في CSS تسمح لك بإنشاء أشكال معقدة وتطبيق تأثيرات بصرية مميزة على العناصر. يمكن استخدامها لتحسين التصميمات وجعلها أكثر جاذبية وديناميكية.