شريط معلومات يدوي 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;gap:0;}

.CnmuTick ul li::before, .CnmuTick ul li::after{display:none;}

.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;}
}
  

الانتقال إلى الرابط المطلوب

معلومات الكاتب

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر