עיצוב סרגל הגלילה- HTML

שלום, היום אני רוצה להראות לכם כלי עיצוב מאוד חשוב לאתר שלכם בHTML,
הכלי הזה מעצב את את סרגל הגלילה של הדף.

קודם כל אני רוצה שתבינו איך מחולק עיצוב סרגל הגלילה-

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

<style> /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } </style>

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

החלק הראשון- webkit-scrollbar-width, קובע את הרוחב של סרגל הגלילה, לכן בתוכו יש את התכונה width(רוחב)

החלק השני- webkit-scrollbar-track, קובע את צבע הרקע של סרגל הגליל לכן יש בתוכו את התכונה  background(רקע)

החלק השלישי- webkit-scrollbar-thumb, קובע את צבע הרקע של החלק הקטן בסרגל הגלילה, לכן בתוכו יש את התכונה background(רקע)

החלק הרביעי- webkit-scrollbar-thumb:hover, קובע את צבע הרקע של החלק הקטן בסרגל הגלילה כאשר המשתמש מעביר את העכבר מעל סרגל הגלילה, לכן בתוכו יש את התכונה background(רקע)

בשביל לעגל את הפינות של סרגל הגלילה אנחנו נוסיף את התכונה border-radius, והערך יהיה כמות של פיקסלים לדוגמא-

<style> /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } </style>

כמובן שאתם יכולים לשנות את הרוחב ואת הצבעים לפי מה שאתם רוצים.

עד כאן להיום,
מוזמנים לשאול ולהגיב בתגובות למטה👇,
להתראות.

→ לפוסט הקודם בנושא HTML לפוסט הבא בנושא HTML ←