האינטרנט טיפ: יצירת הניתן לשימוש חוזר Class "לחצן"

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

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

צבע הרקע של לחצן

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

זה הרקע הדרגתי יחזור אופקית, כך כפתורים יכול להיות ארוך או קצר כמו שאנחנו צריכים אותם, לא להיות מוגבל על ידי ממדים של הגרפיקה. בואו ליצור את צבע ב Photoshop. יצירת מסמך חדש רחב 20px גבוה על ידי 75px. זו גרפי יכול להיות רזה כמו 1px מאז זה רק הולך להיות חזר אופקית, אבל נעזוב את זה 20px כדי שנוכל לראות מה אנחנו עושים. ההבדל גודל הקובץ הוא זניח בכל מקרה.

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

כעת לחץ לחיצה כפולה על זה שכבה ב 'שכבות' (> Layer חלון) כדי להעלות את סגנונות שכבה. לחץ על סגנון שכבת צבע. כברירת מחדל, אתה צריך שיפוע כלפי מעלה ומטה של ​​לבן ושחור. זה טוב, לחץ על תצוגה מקדימה של שיפוע ולשנות את הצבעים למשהו מתאים יותר לסגנון כפתור העיצוב שלך. במקרה זה, כמה נחמד רווי האדומים יעשו:

שמור את המסמך (מוזר, PNG-24 הוא בדרך כלל הטוב ביותר מראש עבור תמונות כאלה. באיכות הגבוהה ביותר, גודל הקובץ הנמוך ביותר). באמצעות אמנה שמות חכמים כמו "bg.png כפתור". הקפד לשמור את PSD שלך בשביל זה, ומי יודע מתי מומלץ לקפוץ חזרה לשם לשנות צבעים, מיקום של השיפוע, או כל פרטים עדינים אחרים.

CSS על לחצן

עכשיו נצטרך להגדיר כ-CSS לשיעור כפתור הגנרית שלנו אשר מנצל את הרקע החדש. נשתמש בכיתה ". הלחצן". פשוט, ברור, גנרי. זה קוד חכם. אנחנו לא רוצים לעשות שום דבר ספציפי כמו "# # mainContent nav li a.button", כי המטרה של כל זה היא כי המעמד הוא גנריים reseable בכל מקום בדף.

הנה איך הייתי להגדיר את זה בכיתה:

.button { background: url(images/button-bg.png) repeat-x top center #650606; border: 1px solid white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 8px; color: white; font-weight: bold; font-size: 12px; text-align: center; } .button:hover { background: white; border: 1px solid red; color: black; } 

וואו זה קצת בפה מלא על הצהרה CSS הא? כל פיסת חשוב אף. בוא נעבור על כל תכונה.

• רקע: זה המקום שבו אנחנו מיישמים את התמונה הדרגתי יצרנו. שימו לב להגדרה "מלמעלה", אשר שומר את זה מיושר אנכית לחלק העליון של הכפתור, וכי התמונה חוזרת אופקית עם "X-repeat". כמו כן יש לשים לב hex קוד הכריז על צבע הרקע. ערך זה מוגדר צבע זהה התחתון של התמונה הדרגתי. רק למקרה כפתור זה גדל יותר גבוה התמונה, צבע יהיה המשך יפה.
• מג"ב: גבול של פיקסל בודד לבן מוחל כאן. אם כפתור שלנו הוא מעל הלבן, זה יהיה בלתי נראה, אבל מאז אני רוצה להשתמש גבול צבעוני על המדינה לרחף, מצב קבוע תצטרך הגבול מדי. אחרת, תהיה "קפיצה" קלה לרחף כי אינה רצויה. הבא את שני הסגנונות הם לעגל פינות על הכפתור. הראשונה היא ספציפית מוזילה מבוסס הדפדפנים (Firefox, Flock ...), השני הוא ספציפי Webkit מבוססות דפדפנים (Safari, Konqueror ...). דפדפנים אחרים (IE) לא יראו את הפינה מעוגלות, אבל שום נזק לא רע.
• ריפוד: זה חיוני כדי לשמור על טקסט מן הקצוות של הכפתור. נותן כפתור כלשהו בגוף. עושה את זה יותר כפתור דמוי וקל יותר לחץ.
• צבע: הרקע שלנו הוא צבע אדום כהה, אז כדי להפוך את הטקסט להופיע, לבן הוא טוב. רק למקרה תמונות כבויים בדפדפן, את הרקע של הכפתור שלנו עדיין יהיה אדום כהה, כי אנו קובעים כי כפתור, כמו גם, כל כך לבן כאן הוא בטוח לחלוטין.
• Font-size/weight/text-align: עצמי פחות או יותר ההסבר כאן. בדרך כלל אני לא יכול גודל טקסט בערכים PX, אבל במקרה של כפתור, מה שהופך את זה הבא לא יוכל לשנות את גודל, ב-IE 6 עשוי להיות אידיאלי עבור עקביות.
• העבר: זה מה שצריך לעשות כפתור שלנו ממש להרגיש כמו כפתור. לחצנים לעשות משהו כאשר הם התהפך. שלנו יהיה מיידי לעבור רקע לבן עם טקסט שחור עם שוליים אדומים. בוטה מאוד, מאוד ברור על כפתור.

באמצעות לחצן שלנו בקוד

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

קישור רגיל ol ':

 <a href="/home" class="button">Go Back Home</a> 

באמת ארוך הקישור:

 <a href="/contact" class="button">Visit The General Contact Form Page</a> 

שלח לחצן:

 <input type="submit" class="button">Submit</input>