فى بوست سابق شرحنا كيفية تغيير Scroll-Bar فى بلوج ر لاضافة لمسة جميلة لمدونتك حتى تحصل على شكل مميز يعجب زوار المدونة فى حركات بسيطة...
فى بوست سابق شرحنا كيفية تغيير Scroll-Bar فى بلوجر لاضافة لمسة جميلة لمدونتك
حتى تحصل على شكل مميز يعجب زوار المدونة فى حركات بسيطة ويمكنك ايضاً
ان ترى العديد من هذه الاشكال والالوان فى مدونتك
بعد الاطلاع على الموضوع السابق يمكنك معرفة فى اى مكان يمكنك لصق كود
Scroll-Bar الذى اخترته لمدونتك
Scroll-Bar الاول :
::-webkit-scrollbar { height:12px; width: 12px; background:#646060; } ::-webkit-scrollbar-thumb { background-color: lightgray; }
Scroll-Bar الثانى :
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Scroll-Bar الثالث :
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, .2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, .2) 50%,
rgba(0, 0, 0, .2) 75%,
transparent 75%,
transparent)
}
Scroll-Bar الرابع :
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #FFF;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
background: #CCC;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
background: #AAA;
}
::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}
Scroll-Bar الخامس :
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
العديد من الاشكال يمكنك الاختيار بينها لما يناسب مدونتك
التعليقات