الملف الثالث من اشرطة التمرير الجانبية لمدونات بلوجر

الملف الثالث من اشرطة التمرير الجانبية لمدونات بلوجر

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff8a16), color-stop(0.79, #ffae5e), color-stop(0.51, #ff8916), color-stop(0.41, #ff9d3d), color-stop(0.00, #ffb268));
background: -webkit-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -moz-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -o-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -ms-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: linear-gradient(to bottom, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #FF9615;
}
::-webkit-scrollbar-thumb:active {
background: #904F00;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

---

::-webkit-scrollbar {
width: 8px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #f60), color-stop(0.63, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.20, #ea2804));
background: -webkit-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -moz-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -o-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -ms-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: linear-gradient(to bottom, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
}
::-webkit-scrollbar-thumb:hover {
background: red;
}
::-webkit-scrollbar-thumb:active {
background: darkred;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

---

::-webkit-scrollbar {
width: 12px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f600fe), color-stop(1.00, #fd63ff));
background: -webkit-linear-gradient(#f600fe, #fd63ff);
background: -moz-linear-gradient(#f600fe, #fd63ff);
background: -o-linear-gradient(#f600fe, #fd63ff);
background: -ms-linear-gradient(#f600fe, #fd63ff);
background: linear-gradient(#f600fe, #fd63ff);
}
::-webkit-scrollbar-thumb:hover {
background: #C60088;
}
::-webkit-scrollbar-thumb:active {
background: #6D024B;
}
::-webkit-scrollbar-track {
background: #F6E4F0;
}
::-webkit-scrollbar-track:active {
background: #FCC9EC;
}
::-webkit-scrollbar-corner {
background: transparent;
}

---

::-webkit-scrollbar {
width: 9px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bdbbbb), color-stop(1.00, #777));
background: -webkit-linear-gradient(#bdbbbb, #777);
background: -moz-linear-gradient(#bdbbbb, #777);
background: -o-linear-gradient(#bdbbbb, #777);
background: -ms-linear-gradient(#bdbbbb, #777);
background: linear-gradient(#bdbbbb, #777);
}
::-webkit-scrollbar-thumb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #4b4b4b), color-stop(1.00, #131313));
background: -webkit-linear-gradient(#4b4b4b, #131313);
background: -moz-linear-gradient(#4b4b4b, #131313);
background: -o-linear-gradient(#4b4b4b, #131313);
background: -ms-linear-gradient(#4b4b4b, #131313);
background: linear-gradient(#4b4b4b, #131313);
}
::-webkit-scrollbar-thumb:active {
background: #111;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

---

في الواقع ، يمكننا تعديل الارتفاع والعرض واللون والخلفية إلخ من شريط تمرير المتصفح الافتراضي. إذا كان لديك القليل من المعرفة بـ CSS ، فيمكنك بسهولة تصميم نمط شريط التمرير الخاص بك بالطريقة التي تريدها.  يمكن للمبتدئين استخدام 3 أو 4 من محددات CSS لتخصيصها ووضعها داخل ملف style.css على المدونة الخاصة بك.

::-webkit-scrollbar { 1
}
::-webkit-scrollbar-thumb { 2
}
::-webkit-scrollbar-track { 3

هذه هي ثلاثة محددات CSS أساسية لتخصيص أي شريط تمرير المستعرض يستند إلى WebKit. بشكل أساسي ، يمكنك تعريف عرض شريط التمرير داخل محدد CSS الأول. ثانيًا ، يمكنك تنميط الشريط / الإبهام داخل السطر الثانى من كود CSS السابق وأخيرًا ، يمكنك تصميم مسار شريط التمرير داخل محدد CSS الثالث.

أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني: