شاشة الإنتظار

لغة القالب

الأدوات

الصفحات

شريط معلومات يدوي HTML- CSS فقط

Admin
الخميس, يونيو 09, 2022
CSS

 بعيداً عن شرائط الأخبار وآخر المواضيع التلقائية التي تعرض عناوين وروابط مواضيع , نقدم لكم شئ خفيف وبسيط شريط معلوماتي لا يعتمد على أى اكواد ضخمة 

ولا اى مكتبات جافا سكريبت فقط كود HTML / CSS

خفيف يمكنك استخدامه في المواضيع أو الإضافات أو الصفحات

ِريط معلومات يدوي HTML- CSS فقط

لا يوجد وظيفة محددة لهذا الشريط سوى انه يقوم بعرض 4 أسطر بشكل جمالي متحرك , يمكن استخدامه في التنبيه عن شئ مهم لديك

يمكن استخدامه لمجرد لفت الأنظار للكتابة 

في النهاية هو لا يشكل اى عبئ على التصفح أو على المكان الذي تضيفه به لان الكود الخاص به خفيف جداً

<style>

@keyframes ticker {0%   {margin-top: 0}25%  {margin-top: -30px}50%  {margin-top: -60px} 75%  {margin-top: -90px}100% {margin-top: 0}}

.CnmuTick{display:block;overflow:hidden;box-sizing:border-box;height:38px;border-radius:4px;line-height:30px;color:#fff;border-width:4px;border-style:solid;}

.CnmuTick span{float:right;padding:0 8px;background-color:rgba(0,0,0,.2);width:100px;text-align:center;overflow:hidden;border-radius:4px;box-sizing:border-box;font-size:16px;margin:0 0 0 -100px}

.CnmuTick ul{margin:0 auto 20px;float:right;overflow:hidden;padding:0 110px 0 0;box-sizing:border-box;animation:ticker 12s cubic-bezier(1,0,.5,0) infinite;list-style:none}

.CnmuTick ul:hover{animation-play-state:paused}

.CnmuTick:hover ul{animation-play-state:paused}

.CnmuTick ul li{list-style:none;margin:0;padding:0;line-height:30px;clear:both;float:right}

.CnmuTick ul li a{color:#fff;text-decoration:none}

.CnmuTick ul li a:hover {color:#000;}

.Tick1{background-color:#0092f9;border-color:#0092f9;}

.Tick2{background-color:#3c9f83;border-color:#3c9f83;}

.Tick3{background-color:#9f3c65;border-color:#9f3c65;}

.Tick4{background-color:#db0000;border-color:#db0000;}

</style>

<div class="CnmuTick Tick1">

<span>معلومات</span>

<ul>

<li>عدل النص</li>

<li>عدل النص</li>

<li>عدل النص</li>

<li>عدل النص</li>

</ul>

</div>

كل ما تحتاجه هو وضع الكود في اى مكان يعجبك في الموضوع او إضافة معينة 

ويمكنك تكرار الشريط بتكرار الكود المعلم بالأصفر مع تغيير الرقم 1 فيه بأى رقم حتى 4 للحصول على لون جديد

معاينة

معلومات
  • مرحباً بك في كن مدون
  • نقدم لك أفضل إضافات بلوجر
  • نتشرف بان تكون متابع للموقع
  • ونسعد لو شاركتنا بإقتراح أو دعم عبر التعليقات

التجاوب

الشرائط الإخبارية والعلوماتية بشكل عام ليست مناسبه للتجاوب لأن المعلومات فيها لا تعرض بشكل جيد على الأحجام الصغيرة للشاشات
طيب ما الحل ؟
هناك حلين للأمر
الأول اخفاء الشريط من البداية عند التجاوب
@media screen and (max-width : 800px) {.CnmuTick {display:none;} }
وهذا الكود تضيفه فوق رمز </style> في الكود السابق مباشرة
الثاني أن يتحول الشريط على التجاوب الى قائمة ثابتة
وهذا عبر استخدام الكود التالي أيضاً فوق نفس الرمز 

@media screen and (max-width : 800px) {
.CnmuTick {height: auto;}
.CnmuTick ul {animation: none;padding: 0;float: none;}
.CnmuTick span {float: none;width: auto;display: inline-block;text-align: right;}
}

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. شريط جميل اخي الكريم كن مدون لقد كنت ابحث عن كود يؤدي نفس هذه الفكرة لكن هذا الكود للأسف غير متجاوب مع الهواتف حيث يعمل جيدا على الحاسوب فقط ولا يظهر جيدا على الجوال بحيث تظهر العناوين مجزأة على الجوال عندما تتجاوز 3 كلمات وقد قمت بإستخدامه على مدونتي للغرض الذي اريده وهذا المثال يوضح المشكلة التي اقصدها
    https://www.tathwir.com/2022/06/Omar-Hamoui.html
    حاولت تعديل الكود لكني لم اتمكن من ذلك أتمنى لو كان هناك تعديل للكود بحيث يعمل جيدا على الهواتف ايضا وشكرا جزيلا.

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

      حذف
  2. تمام اخي الكريم لقد تم التعديل واصبحت العناوين تظهر بالكامل على الجوال وهكذا افضل مما كان فشكر جزيلا على هذا الكود المفيد

    ردحذف
    الردود
    1. على رأسي يا غالي , وسرني مرورك كثيراً

      حذف
  3. بارك الله فيك استاذنا
    الله يحفظك ♥

    ردحذف
    الردود
    1. حبيبي أخي منير , ربنا يرفع قدرك يا غالي

      حذف
  4. بارك الله فيك اكثر من رائع يااستاذنا

    ردحذف
    الردود
    1. تسلم أخي أحمد وفيك بارك الله أخي الحبيب

      حذف

عدد المواضيع