معاينة الأشكال
مرحباً بمتابعين مينت ويب الكرام في هذه المقالة ، سنتطرق إلي شرح تغير مظهر شريط التمريرالافتراضي للمتصفح ،ولكن في الوقت الحالي هذا الشرح يعمل فقط علي المتصفحات التي تدعم webkit ، مثل Opera و Chrome و Safari و UC Browser ،ولكن لسوء الحظ لن تعمل عي متصفحات أخري مثل Firefox و IE .
تثبيت إضافة شريط التمرير علي بلوجر
الأضافة الشريط الجانبي إتجه إلي لوحة تحكم بلوجر المظهر تخصيص متقدم إضافة CSS بعدها نقوم بإضافة نمط Css الذي أختارته في الأسفل سأقوم بوضع 6 أنماط لشريط التمريرالجانبي بأشكل مختلفة.
الشكل الأول
/* الشكل رقم1 */
body::-webkit-scrollbar {
width: 8px;
}
body::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #E2E2E2;
border-radius: 10px;
}
الشكل الثاني
/* الشكل رقم 2 */
body::-webkit-scrollbar {
width: 5px;
}
body::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #11171a;
border-radius: 10px;
}
الشكل الثالث
/* الشكل رقم 3 */
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
الشكل الرابع
/* الشكل رقم 4 */
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
background-color: #FF8C00;
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
border-radius: 10px;
}
الشكل الخامس
/* االشكل رقم 5 */
body::-webkit-scrollbar {
width: 15px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, #4e54c8, #8f94fb);
border-radius: 10px;
-webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}
الشكل السادس
/* الشكل رقم 6 */
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
background-color: #799F0C;
background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
border-radius: 10px;
}
إضغط علي تطبيق علي المدونة ليتم حفظ التغيرات وتذكر أن الأضافة لن تعمل أذا كنت تستخدم متصفح مثل Firefox أو Internet Explore .