سرادق في المغلق - دليل المبتدئين
تم تقديم Marquee لأول مرة في برنامج Internet Explorer وكان يتمتع بشعبية كبيرة في التسعينيات قبل أن تقرر W3C في النهاية استبعاده من عنصر HTML القياسي بسبب مشكلات قابلية الاستخدام. تم تشجيع مصممي الويب على عدم استخدام العلامة.
على الرغم من المثير للدهشة ، فإن السرادق يصنع الآن عودة ، وليس في علامة شكل كما فعلت ، ولكن في وحدة CSS. تتوفر هذه الوحدة كجزء من مواصفات Webkit CSS وتعمل W3C حاليًا على وحدة مماثلة أيضًا. ومع ذلك ، نظرًا لأن إصدار W3C لا يزال في مرحلة توصية المرشح ، فهو لا ينطبق بعد. لذلك ، في هذا الوقت ، سنغطي فقط واحدة من مواصفات Webkit.
بناء الجملة
بادئ ذي بدء ، يمكن تعريف سرادق باستخدام بناء جملة الاختصار التالية.
-سجل الويب: [الاتجاه] [الزيادة] [التكرار] [النمط] [السرعة]
أعتقد أن كل من القيم المطلوبة في بناء الجملة أعلاه واضحة تمامًا ، أو يمكنك العثور عليها موضحة بشكل كاف في هذه الوثائق. لذلك ، إذا كنت تريد البحث بشكل أعمق في كيفية عمل بناء الجملة هذا ، يمكنك دائمًا الرجوع إلى الوثائق أولاً.
ثم ، انضم إلينا أثناء تقدمنا لإنشاء بعض الأمثلة الحقيقية وشاهد كيف تعمل.
مثال 1: التمرير النص
حسنًا ، في المثال الأول ، سننشئ حركة كلاسيكية من المستطيل الذي يتحرك النص من اليمين إلى اليسار.
دعنا ننشئ ترميز النص الخاص بنا كما يلي:
المصاصة تتصدر الليمون قطرات عناب يطبق فطيرة عرق السوس فطيرة السمسم يستقر.
ثم حدد المستطيل باستخدام بناء الجملة التالي.
-webkit-marquee: السيارات المتوسطة التمرير لانهائي العادي. overflow-x: -webkit-marquee؛
عندما يتم تعيين الاتجاه سرادق ل تلقاءي, سينتقل افتراضيًا من اليمين إلى اليسار ؛ بدلا من ذلك يمكنك تغيير هذه القيمة إلى اليسار. لاحظ أيضا أن تجاوز السينية يجب تعيين الخاصية إلى -بكت-سرادق بحيث المحتوى سوف يتصرف دائما مثل واحد. إذا حذفت هذه الخاصية ، فلن يتحرك النص.
انظر التجريبي.
مثال 2: ترتد جيئة وذهابا
في المثال الثاني ، سنحاول إعطاء نمط مختلف للسرادق. هذه المرة نستخدمها البديل بدلا من التمرير وتغيير قيمة الاتجاه إلى حق. بهذه الطريقة ، سينتقل المستطيل من اليسار إلى اليمين ثم يرتد ذهابًا وإيابًا.
-webkit-marquee: السيارات متوسطة لا حصر له البديل العادي. overflow-x: -webkit-marquee؛
انظر التجريبي
مثال 3: تحريك النص لأعلى
وللمثال الأخير ، سوف نغير اتجاه المستطيل للتقدم للأعلى. هناك اثنان اتجاه القيم للقيام بذلك ؛ يمكنك تغيير القيمة ل فوق أو المكانية.
أنا شخصياً لا أفهم سبب قيام Webkit بتقديم قيمتين تقومان بنفس الشيء بشكل أساسي لأنني أعتقد أن ذلك قد يؤدي إلى إرباك بعض الأشخاص.
-webkit-marquee: up متوسط لانهائي انتقل عادي؛ overflow-x: -webkit-marquee؛
انظر التجريبي
علاوة على ذلك ، قمت بتجميع بعض الأمثلة الأخرى ولكنها ستكون ساحقة إذا تم شرحها جميعًا هنا.
ولكن ، يمكنك عرض كل العرض التوضيحي وتنزيل المصادر من الروابط أدناه.
- عرض
- تحميل المصدر
الفكر النهائي والمراجع
لقد فوجئت أولاً أنه لا يزال هناك اهتمام بالسرادق ، الذي اعتقدت أنه قد حقق نهايته. وقد دفعني هذا أيضًا إلى السؤال عن مدى فائدة وحدة CSS مثل هذه. في الواقع كل متصفح لا يزال يدعم تراث بطاقة.
فما رأيك؟ هل ما زالت المظلة ذات صلة في هذا العصر وستكون مفيدة في تصميم الويب الحديث?
إذا كنت لا تزال تشعر بالفضول حيال هذه الأشياء الرائعة ، يمكنك زيارة بعض المراجع التالية:
- Safari CSS Reference
- Webkit مولد سرادق
- التوثيق الشامل القديم
علامة من Sitepoint. - وهناك دائمًا مولد لكل شيء تقريبًا ، بما في ذلك مولد Marquee Generator هذا.
