أداة متخصصة لإنشاء شرائط (Ribbons) باستخدام CSS. يمكنك اختيار نوع الشريط (زاوية، علوي، جانبي)، تخصيص اللون، النص، حجم الخط، والحجم المناسب. شاهد المعاينة المباشرة وانسخ كود HTML/CSS الناتج لاستخدامه في مشاريعك. مثالية للشعارات، الشارات، علامات الخصم، أو العلامات الزخرفية.

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

توفر هذه الأداة ثلاثة أنواع من الشرائط: شريط الزاوية (Corner Ribbon) الذي يوضع في زاوية العنصر، شريط علوي (Top Ribbon) يمتد عبر عرض العنصر بالكامل، وشريط جانبي (Side Ribbon) عمودي على الجانب الأيسر. يتم إنشاء الكود باستخدام CSS النقي (بدون صور) مع تقنيات positioning وtransform لتحقيق الشكل المطلوب. يمكنك تخصيص الألوان والنص والحجم. المعاينة المباشرة تساعدك على رؤية النتيجة قبل النسخ. جميع العمليات تجري محلياً في متصفحك – لا يتم إرسال أي بيانات إلى الخادم. انسخ الكود الناتج وألصقه في ملف HTML/CSS الخاص بك.

• اختر نوع الشريط : من القائمة المنسدلة: زاوية (يوضع في الزاوية العلوية اليمنى)، علوي (يمتد عبر العرض)، جانبي (عمودي على الجانب الأيسر).
• خصّص الألوان : اختر لون الخلفية ولون النص باستخدام منتقي الألوان.
• أدخل النص : اكتب النص الذي تريد ظهوره على الشريط (مثل "عرض خاص"، "جديد"، "خصم 50%").
• ضبط الحجم : حدد حجم الخط بالبكسل، ثم قم بتعديل الحجم الخاص بنوع الشريط (حجم الزاوية، ارتفاع الشريط العلوي، أو عرض الشريط الجانبي).
• شاهد المعاينة : يتم تحديث المعاينة تلقائياً بعد تغيير الإعدادات. يمكنك أيضاً الضغط على زر "تحديث المعاينة" للتأكيد.
• انسخ الكود : اضغط زر "نسخ كود HTML/CSS" لنسخ الكود الناتج. قم بلصقه في ملف HTML الخاص بك (الكود يتضمن HTML وCSS معاً).
• نصائح : استخدم الشريط العلوي للترويسات، شريط الزاوية لتمييز المنتجات، والشريط الجانبي للقوائم الجانبية.