مقدمة

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

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

الآن كان بإمكاني أن أطلب من المصمم إنشاء صورة خلفية للقيام بذلك نيابةً عني، ولكن بدلاً من ذلك أردت معرفة ما إذا كان بإمكاني القيام بذلك بنفسي باستخدام قوة CSS. وها أنا أستطيع ذلك، باستخدام مسار مقطع CSS.

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

مسار مقطع CSS

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

عرض توضيحي من مستندات مسار مقطع MDN. توفر خيارات مسار المقطع المختلفة طرق عرض مختلفة لمنطاد الهواء الساخن والنص.

يمكن لخاصية مسار المقطع قبول مجموعة كبيرة ومتنوعة من القيم:

• ، الذي يقبل قيمًا مثل عنوان url لعنصر SVG مع تحديد مسار القطع.
• ، الذي يقبل قيمًا مثل مربع الهامش ومربع الحدود.
• ، الذي يقبل قيمًا مثل Circle() وrect().
• القيم العالمية، والتي تقبل قيمًا مثل الوراثة والعودة.

يمكن أيضًا دمج قيم و معًا في مسار مقطع واحد.

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

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

أحد خصائص التي يقبلها مسار مقطع الخصائص هو polygon()، وانتهى الأمر بأن يكون هذا هو الحل الذي أحتاجه لقسم الخلفية المائلة.

المضلع الذي أحتاج إلى إعادة إنشائه باستخدام CSS

الخلفية المضلعة الرمادية التي كنت بحاجة لإنشائها باستخدام CSS.

الصورة أعلاه عبارة عن لقطة شاشة لقسم الخلفية الرمادية الذي كنت بحاجة إلى إعادة إنشائه باستخدام خاصية polygon() الخاصة بمسار مقطع CSS. وأول شيء كان علي فعله هو إنشاء بعض عناصر HTML لتطبيق CSS عليها.

مسار المقطع المضلع () مقابل مسار المقطع () المستقيم

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

قم بإعداد HTML وCSS

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

ملاحظة حول القوالب:

إذا سبق لك استخدام مكونات JSX، فإن Node.js مع Pug أو Handlebars، أو قوالب Jekyll - Hugo متشابهة: عناصر HTML مع متغيرات Go ووظائف متناثرة مع {{ }} لعرض المعلومات الصحيحة أينما كانت القوالب يتم حقنها.

إليك الكود الخاص بما أطلقت عليه اسم "قسم الألغاز" من الصفحة بسبب قطعة اللغز الموجودة في مقدمة هذا القسم. لأغراض وتوضيح هذه المقالة، قمت باستبدال متغيرات Go التي تم إدخالها في القالب بـ HTML الذي تم إنشاؤه.

single.html

  

    

    

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
        
      
    

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

من بين الفئات المخصصة مثل about-body، والتي استخدمتها لإضافة تصميم مخصص، هناك فئات مثل الحاوية، والصف، وcol-12 أو col-md-6، وmb-5، وmb-3.

جميع الفئات الأخيرة هي فئات Bootstrap، والتي تعمل على جعل عناصر النص والصورة التي تظهر على الشاشة تشارك عرض الصفحة عندما يكون إطار العرض أكبر من عرض معين (col-md-6)، أو تطبق هامشًا سفليًا بمقدار معين للعلامات

(mb-3 أو mb-5).

تعتبر فئات Bootstrap بجانب هذه المقالة، على الرغم من أن الفصل الذي يجب التركيز عليه هو قسم الألغاز الذي يغلف كل النص وصورة قطعة اللغز.

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

أضف مسار مقطع CSS لتشكيل قسم اللغز

نظرًا لأنني لم أكن متأكدًا تمامًا من كيفية تصميم

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}