כפתורי CSS. יתרונות. סגנונות. אסתטיקה

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

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

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

CSS, שהינה

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

CSS-קוד - מדריך עבור דפדפנים המכילים מידע כגון רכיבי תצוגה בדף ואיפה לעשות את זה.

קל חנות אלה הוראות נפרדות קובץ עם סיומת .css. מצד השני, הם יכולים להיות ממוקמים בתחילה-מסמך html.

לחצן באתר. מה זה

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

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

הם יכולים להיות שנוצרו במיוחד, למשל, ב- Photoshop, ומעלים תמונה לאתר, וניתן בקלות ובמהירות לבוא איתם ב- CSS.

כפתורי CSS

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

כידוע, ישנן שלוש נקודות מרכזיות:

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

לחצנים המלאים מוצגים במדויק בדפדפנים כמו פיירפוקס, ספארי, אופרה, כרום. במקביל ב- Internet Explorer 9, הכפתור לא יוצג במלואו. לדוגמה, מעבר לפינות, צל טקסט שבץ סביב כפתור לא יהיה גלוי כאן בשל העובדה כי תכונות אלה אינן נתמכות על ידי דפדפן זה. עם זאת, באופן כללי, CSS-כפתורים עבור האתר נראה טוב בגירסה זו של הדפדפן. ב- Internet Explorer 8 וגרסאות אחרות מתחת השמיני על כפתור לא יהיה נפח גלוי, אך בעת ובעונה אחת, כדי לשמור על מראית עין של הדרגתיים.

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

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

לכל תפקיד ניתן סגנון משלו. סגנונות אלה כתובים קובץ CSS מיוחד או בין תגי ה- head בדף מאוד.

מניחים על כפתור באתר

בין הקוד שנכתב תגי גוף:

שם

id = "Button2" כאן הוא השם שהוענק על הכפתור,

href = http: // אתר / מאמר / 175,988 /% E2% 80% 9D% D0% 93% D0% 98% D0% 9F% D0% 95% D0% A0% D0% A1% D0% A1% D0% AB % D0% 9B% D0% 9A% D0% 90%% E2 80% 9D מקבלים קישור ישיר המסמך הנדרש,

TEXT - מודפס הטקסט שיוצג על הכפתור.

סגנונות עבור הלחצנים

1. כפתור סגנון CSS נרשם בנפרד במסמך או בדף עצמו:

2. CSS כפתורים שנכתב קודם, כאשר הם במנוחה:

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

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

CSS - כפתורים יפים

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

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

פרמטרים אלה הם:

- הצבע של הטקסט על הכפתור;

- את גודל הטקסט כפתורים;

- כפתורי שיפוע צבע;

- כפתורי זוויות רדיוס;

- והצבע של שבץ שלה.

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