فاصل القسم الرئيسي
مجاني، بلا تسجيل، يعمل داخل متصفحك.
أكثر ما يأتي الناس من أجله إلى هنا: منحنى بين قسم رئيسي ملوّن وما تحته، كي يلتقي القسمان على شكل بدل خط مستقيم.
الوصفة
| الشكل | موجة هادئة |
|---|---|
| التصدير بصيغة | SVG |
| الحجم | 322 B |
خطوة بخطوة
- افتح المولّد واختر موجة هادئة من صف الإعدادات المسبقة.
- اضبط لون التعبئة على لون خلفية القسم الذي *تحت* القسم الرئيسي، لا على لون القسم الرئيسي.
- انسخ SVG والصقه بوصفه آخر عنصر داخل قسمك الرئيسي.
- امنحه `display:block` و`width:100%` ليمتد على العرض كاملًا دون ترك فجوة تحته.
ما ستنسخه
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></svg>بمزيد من التفصيل
اللون هو الخطوة التي يخطئ فيها الناس. فالفاصل هو الحافة العليا للقسم *التالي* وهي تمتد صعودًا داخل القسم الرئيسي، فعليه أن يحمل لون ذلك القسم — اضبطه على لون القسم الرئيسي وستحصل على شكل غير مرئي فوق خلفيته نفسها. وإن ظهر خط بسُمك بكسل واحد تحت الشكل، فذلك ملف SVG جالسًا على خط أساس النص: و`display:block` يزيله.
أسئلة
من أي شكل أبدأ لأجل فاصل القسم الرئيسي؟
موجة هادئة، مصدَّرًا بصيغة SVG. هذا الاقتران هو ما بُنيت عليه الصفحة، والمعاينة أعلاه هي ذلك الشكل بعينه — لكنه نقطة انطلاق لا قاعدة. تبقى كل المؤشرات فعّالة بمجرد فتحه.
كم يضيف إلى الصفحة؟
نحو 322 بايت لهذا المزيج. أصغر من أيقونة واحدة، ولا يحتاج أي طلب شبكة إطلاقًا، لأن الشكل ترميز لا ملف صورة.
هل سيعمل على الهاتف؟
نعم. فاصل الموجة مضبوط ليتمدّد إلى حاوِيَته بدل الحفاظ على نسبته، وهذا ما يتيح لشكل واحد أن يمتد على أي عرض شاشة دون أشرطة سوداء. أما الكتل فتحافظ على نسبها، لأن الكتلة الممدَّدة ليست سوى قطع ناقص.
كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.