موجة فوق التذييل
مجاني، بلا تسجيل، يعمل داخل متصفحك.
الفكرة نفسها التي لفاصل القسم الرئيسي، مقلوبة. فالمنحنى هو الحافة العليا للتذييل، فيقع الملء فوقه وينغلق على لون التذييل نفسه.
الوصفة
| الشكل | موجة التذييل |
|---|---|
| التصدير بصيغة | SVG |
| الحجم | 551 B |
خطوة بخطوة
- اختر موجة التذييل — فهي مقلوبة رأسيًا سلفًا لهذا الغرض.
- اضبط التعبئة على لون خلفية تذييلك.
- انسخ SVG وضعه مباشرة فوق عنصر التذييل.
- أزل أي هامش بين الشكل والتذييل، وإلا ظهر شريط رفيع من خلفية الصفحة.
ما ستنسخه
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="0.35"/><path d="M-360 116.33C-300 112.14,-120 88.78,0 91.21C120 93.64,240 120.61,360 130.91C480 141.…بمزيد من التفصيل
استخدم القلب الرأسي لا `transform: scaleY(-1)` في CSS. فالقلب مخبوز في المسار، وبذلك يقف ملف SVG المصدَّر وحده بلا غلاف وبلا تحويل يلزم تذكّره — وهو ما يهمّ أكثر ما يهمّ إن بدّلت هذا لاحقًا إلى التصدير كخلفية CSS، حيث لا يوجد أصلًا عنصر لتحويله.
أسئلة
من أي شكل أبدأ لأجل موجة فوق التذييل؟
موجة التذييل، مصدَّرًا بصيغة SVG. هذا الاقتران هو ما بُنيت عليه الصفحة، والمعاينة أعلاه هي ذلك الشكل بعينه — لكنه نقطة انطلاق لا قاعدة. تبقى كل المؤشرات فعّالة بمجرد فتحه.
كم يضيف إلى الصفحة؟
نحو 551 بايت لهذا المزيج. أصغر من أيقونة واحدة، ولا يحتاج أي طلب شبكة إطلاقًا، لأن الشكل ترميز لا ملف صورة.
هل سيعمل على الهاتف؟
نعم. فاصل الموجة مضبوط ليتمدّد إلى حاوِيَته بدل الحفاظ على نسبته، وهذا ما يتيح لشكل واحد أن يمتد على أي عرض شاشة دون أشرطة سوداء. أما الكتل فتحافظ على نسبها، لأن الكتلة الممدَّدة ليست سوى قطع ناقص.
كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.