נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

כיצד לשנות את מראה הכפתורים באתר?

מחבר:
בתאריך:

מראה הכפתורים שמגיעים כברירת מחדל עם הדפדפנים השונים אינו גזירה, ובאמצעות קצת CSS אפשר בהחלט להחליף אותם במשהו שהולם יותר את התחושה באתר. אפשר לראות את הדוגמה הבאה:

כדי להחליף את מראה הכפתור התחתון השתמשתי בקוד ה-CSS הבא: 

#button_replace {
background: transparent url(replace_button.png) 0 0 no-repeat;
width: 152px;
height: 50px;
cursor: pointer;
border: none;
}

background מגדיר את תמונת הרקע. קודם כל, מאיפה לקחת את תמונת הרקע באמצעות הפנייה ל-url מסויים, הגדרת הרקע של התמונה עצמה לשקוף (transparent) מאוד חשוב להקפיד על זה מפני שהרבה פעמים התמונה לא גזורה על הפיקסל ואנחנו לא רוצים רקע שונה מהרקע הכללי, הערכים 0 0 מגדירים את מיקום תמונת הרקע, בקואורדינטות x ו-y, ביחס לאלמנט שהוא צריך להחליף אותו, והערך no-repeat מגדיר שבמקרה של חריגה ממימדי התמונה בערכי הגובה או הרוחב, התמונה לא תראה כחוזרת על עצמה.

width ו-height מגדירים את המימדים של תמונת הרקע. זה גם המקום להגדיר ערכים שונים של רוחב וגובה ממה שהתקבל מהגרפיקאי. 

cursor : pointer מגדיר שכשעומדים על האלמנט יהפוך המצביע לתמונה של כף יד. 

border : none מעלים את הגבול ששימש את הכפתור המקורי.

 

במידה ואנחנו רוצים לשלב כפתורים עם טקסט שהוא חלק מהתמונה, את הטקסט המקורי שהופיע על הכפתורים ניתן להעיף באמצעות text-indent : 9999px, שזורק את הטקסט מחוץ לטווח הראייה. השיטה הזו חביבה על גרפיקאים, אבל מנועי חיפוש עלולים לראות בכך ניסיון להטעייה של הגולשים באתר, ולהוריד בניקוד האתר. לכן, אם אפשר, עדיף להמנע מכפתורים עם כתב מאוייר ולהעדיף תמיד כתב חי על כל הכפתורים באתר.

 

השיטה הזו נבדקה ונמצאה תואמת לדפדפנים: Chrome, Firefox, Safari ו-IE9.

 

 

 

הוסף תגובה חדשה

 

= 8 + 9

תמונת המגיב

חיים בתאריך: 18.07.2015

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

תמונת המגיב

יוסי בן הרוש בתאריך: 18.07.2015

תודה רבה על התגובה המחכימה. בררתי, ואכן שימוש ב-text indent נחשב לידידותי למנועי חיפוש.