איך לעצב את בר הגלילה של האתר

בסרטון הבא, נראה איך לעצב את בר הגלילה של האתר (הפס הזה שאיתו אפשר לגלול את האתר).

כל הקודים מתחת לסרטון.

הגדרת רוחב הבר גלילה.

				
					::-webkit-scrollbar {
  width: 10px;
}

צבע רקע של הבר גלילה.

				
					::-webkit-scrollbar-track {
  background: #000000;
}

הוספת אפקט הצללה פנימית לרקע של הבר גלילה.

				
					box-shadow: inset 0 0 5px grey;

הגדרת צבע הבר גלילה בעצמו.

				
					::-webkit-scrollbar-thumb {
  background: #FFFF00;
}

עיגול פינות.

				
					border-radius: 10px;

מסגרת.

				
					border: solid 2px #000000;

מעבר צבע.

				
					background-image: linear-gradient(red, yellow);

צבע שונה במעבר עכבר.

				
					::-webkit-scrollbar-thumb:hover {
  background: #FF0000;
}

והנה אתר מגניב שם אפשר לשחק עם העיצוב ולייצא את הקוד.
CSS Scrollbar Generator

אם אתם רוצים לדעת עוד על מעברי צבע,
מעברי צבע מתקדמים עם אלמנטור ו-CSS

רוני רביץ

מעצב ומפתח אתרים, מומחה לאתרי וורדפרס מתקדמים, מרצה ויועץ לעסקים על נוכחות דיגיטלית, מעביר קורסים וסדנאות על בנייה ועיצוב אתרים, שיווק דיגיטלי ופרילנסריות. 0583276529