בפוסט הבא נלמד כיצד לבנות כפתורים מגניבים המכילים טקסט חי, רוחב הכפתור יגדל בהתאם לכמות הטקסט בתוך הכפתור, אתם בטח שואלים את עצמכם “מה כ”כ מורכב כאן?… ” אז ככה… במידה והיינו מדברים על כפתורים מרובעים רגילים
אז אכן התמיהה במקום אך כאשר פינות מעוגלות ורוחב כפתור דינאמי נכנסים לתמונה,
הסיפור הופך להיות קצת יותר מעניין וקצת יותר מורכב, להלן וידאו קצר המציג את היכולות של השיעור שלפנינו:
1. הכפתור שלנו בעצם בנוי מתגית <a> ו <span> כאשר כל אחד מציג חלק שונה מתמונת הרקע של הכפתור,
כך אמור להיראות הHtml:
<a href=”#”><span>Sliding Doors on web magazine</span></a>
עד כאן ממש משחק ילדים, נכון?..
2. לאחר שיצרנו כפתור בפוטושופ (רצוי לקחת בחשבון רוחב מקסימלי שיהיה ניתן להכיל טקסט ארוך במיוחד 300px במקרה שלנו )יש ליצור עיצוב נוסף עבור מצב לחיצת עכבר,כעת עלינו לאחד בין שני המצבים ורטיקאלית בצורה מדוייקת ללא ריווח כלל ונחתוך את הפינות בצד ימין לתמונה ניפרדת.
3. הגענו לשלב העיקרי כתיבת קוד הcss,מאחר וייתכן מאוד שנרצה שיהיו כמה כפתורים זה לצד זה (List) נגדיר float left לכפתור:
.clear {
overflow: hidden;
width: 100%;
}
a.buttonSliding {
background: transparent url(‘http://yoursite.com/images/bg_button_a.gif’) no-repeat scroll top right;
color: #77d7f7;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 91px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
}
a.buttonSliding span {
background: transparent url(‘http://yoursite.com/images/bg_button_a.gif’) no-repeat;
display: block;
line-height: 81px;
padding: 5px 0 5px 18px;
}
שים לב!
סכום הpadding הורטיקאלי וה line-height צריך להיות שווה לגובה הכפתור ( 91px במקרה שלנו ).
4. כעת מה שנותר הוא לגרום להצגת התמונה במצב לחיצה, הדרך:
a.buttonSliding:active {
background-position: bottom right;
color: #77d7f7;
outline: none;
}
a.buttonSliding:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
להלן דוגמה של הכפתור הסופי כולל קבצים להורדה:
דמו I הורדה
זה הכל חברים, תיהנו!
אחלה כתבה,
תודה רבה.