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

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

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

Gradient רקע על לחצן

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

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

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

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

שמור את המסמך שלך (מוזר, 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 הצהרה? כל פרט ופרט חשוב אף. בואי נעבור על כל תכונה.

• רקע: זה המקום שבו אנחנו מיישמים את התמונה Gradient שיצרנו. שימו לב "העליון" בהגדרה, אשר שומר אותו במאונך מיושר העליון של לחצן וכי התמונה חוזרת אופקית עם "repeat-x". גם לב יש ששה קוד הכריז על צבע הרקע. ערך זה מוגדר על צבע זהה התחתון של התמונה מאוד הדרגתי. רק למקרה כפתור זה גדל גבוה יותר התמונה, את הצבע יהיה המשך יפה.
• שוטרי: יחיד הגבול פיקסל לבן מוחל כאן. אם לחצן שלנו הוא על לבן, זה יהיה בלתי נראה, אבל מאז אני רוצה להשתמש בצבע על גבול המדינה לרחף, המדינה תצטרך רגיל גבול מדי. אחרת, לא יהיה קל "לקפוץ" על לרחף כי היא אינה רצויה. הבא שני הסגנונות הם לעגל את הפינות על הכפתור. הראשונה היא ספציפית דפדפן מבוסס מוזילה (Firefox, Flock ...), השני הוא ספציפי מבוססות דפדפנים WebKit (Safari, Konqueror ...). בדפדפנים אחרים (IE) לא יראו את הפינה מעוגלת, אבל שום נזק לא רע.
• Padding: זה חיוני כדי לשמור על טקסט מן השוליים של הכפתור. נותן על כפתור כלשהו בגוף. עושה את זה יותר כמו כפתור וקל יותר לחץ.
• צבע: הרקע שלנו הוא צבע אדום כהה, כדי להפוך את להראות את הטקסט, לבן הוא טוב. רק בתמונות במקרה מבוטלים על הדפדפן, את הרקע של הכפתור שלנו עדיין יהיה אדום כהה, כי אנו קובעים כי לחצן כמו גם, כל כך לבן פה הוא בטוח לחלוטין.
• 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>