CSS סניפיט: עיצוב פס הגלילה של הדפדפן

עיצוב פס הגלילה של הדפדפן

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

פס הגלילה הוא דוגמה מצויינת לחלק בדפדפן שנמצא איתנו לאורך כל הגלישה באתר, ואנחנו השקענו כל כך הרבה בעיצוב האתר ובכל החלקים שבו בצורה מושלמת, ופס הגלילה פשוט לא משתלב!

אז למעצבים שבינינו (או שלא) קבלו באהבה קוד CSS לפס גלילה חתיך במיוחד, הדביקו אותו בהתאמה אישית ב-CSS מותאם. מוזמנים לשחק עם הצבעים ועם רוחב פס הגלילה כרצונכם:

				
					/******Scroll Bar*********/

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

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #47E7E3;
  border-radius:100px;
	
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #747DF3;
}
				
			
מעצבת ומפתחת אתרי אינטרנט למעלה מ-18 שנה. בעלת סטודיו ISL DESIGN לעיצוב ובניית אתרים, מומחית בפיתוח אתרים דינאמיים מורכבים, אתרי איקומרס, מספקת פיתוחים בהתאמה אישית, ומעבירה קורסים ושיעורים פרטיים בוורדפרס.
מדריכים באותו נושא
בואו נדבר על זה
5 1 דרג
דירוג המאמר
הירשם
עדכן אותי על
guest
0 תגובות
הישנות ביותר
החדשות ביותר הכי פופולאריות
תגובות בגוף המאמר
צפה בכל התגובות
דילוג לתוכן