שלב ראשון - העתקת הקוד
סמן הגלילה הצדדי מגיע כברירת מחדל ברוב אתרי האינטרנט בצבע אחיד (אפור) וגודל אחיד. לפניכם קוד המאפשר שינוי עיצובי לסמן הגלילה. בשלב הראשון - העתיקו אותו. (העבירו את העכבר על אזור הקוד ולחצו על כפתור copy שיופיע בצד ימין למעלה.
body::-webkit-scrollbar {
width: 18px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
background: #c62c2c; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: #385bf0; /* color of the scroll thumb */
border-radius:0px; /* roundness of the scroll thumb */
border: 2px solid #c62c2c; /* creates padding around scroll thumb */
}
שלב שני - הדבקת הקוד
הדביקו את הקוד באזור הקוד בתבנית האתר:
שלב שלישי - עיצוב פס הגלילה
טוב, אם עשיתם הכל נכון, סמן הגלילה נהפך לכחול על רקע אדום.
עכשיו נרצה לשנות את הצבעוניות ואת הנתונים האחרים למה שתרצו.
הגדירו את ההגדרות הבאות:
המודגש בצהוב - עובי פס הגלילה בפיקסלים. שימו לב שככל שהעובי גדול יותר, כך זה יתפוס יותר מקום על חשבון מסך האתר.
המודגש באדום - הצבע של הרקע עליו נגלל הפס. (הזינו קוד צבע)
המודגש בירוק - צבע פס הגלילה עצמו. (הזינו קוד צבע)
המודגש בכחול - עיגול הפינות של פס הגלילה. החליטו האם הפס יהיה מרובע או עגול
המודגש בסגול - המסגרת של פס הגלילה. תוכלו להחליט האם תהיה לו מסגרת ומה תהיה עוביה (בפיקסלים) ואיזה צבע יהיה לה (הזינו קוד צבע).
תתחדשו. יש לכם יופי של סמן. חדש, ייחודי ונראה טוב.
עד כאן להפעם. נתראה בפוסט הבא.
