כנראה שאף אתר לא יכול להסתדר בלעדיולחצנים לדפים האחרים שלך. כולם רוצים למשוך תשומת לב לאתר שלהם, ובמקביל משתמשים במגוון אמצעים. בעיצוב אתרים הם כוללים עיצוב כפתורים, הנבדלים זה מזה בפרמטרים שונים - בגודל, בצורתם ובאפקטים וכן הלאה.
כפתורי CSS הם הנוחים ביותר. ברגעים ניתן לשנות את הסגנון שלהם לחלוטין. וכמובן, זה מספק הזדמנויות נוספות לעיצוב האתר בכללותו.
ראשית, כך שלא יהיה בלבול ואי הבנה, כדאי להבין כמה מושגים.
CSS שמשמעותו "גליונות סגנון מדורגים" בתרגום, היא כיום אחת הטכנולוגיות העיקריות באינטרנט. סביר להניח שלאתר אחד לפחות לא יהיה בלי שפה זו.
קוד CSS הוא הוראות לדפדפנים המכילים מידע כיצד להציג אלמנטים בדף והיכן לעשות זאת.
זה נוח לאחסן הוראות כאלה בקובץ נפרד עם סיומת .css. מצד שני, אתה יכול לשים אותם בתחילת מסמך ה- HTML.
כפתור, או אלמנט גרפי לניווטהאתר אמור למשוך תשומת לב למבקר לראות שהמידע המעניין אותו מסתתר מאחוריו, ובנוסף, אני רוצה ללחוץ עליו. כאשר הוא בהיר ונראה מספיק, הם בהחלט ישימו לב לזה. כפתור כזה יכול לגרום למבקרים, למשל, להשאיר את הביקורת שלך באתר, או לשלוח בקשה, להירשם לניוזלטר מעניין, וכמובן, פשוט להעביר לקטע של האתר המבוקש על ידי המשתמש.
הכפתורים הם סטטיים, מונפשים, דינמיים, עם ובלי צליל.
ניתן ליצור אותם במיוחד, למשל בפוטושופ, ולהעלות אותם לתמונת האתר, או שתוכלו למצוא אותם בקלות ובמהירות ב- CSS.
ביצוע כפתורים זה פשוט מאוד. היתרון הגדול של היישום שלהם הוא בכך שניתן לשנות אותם ללא הכר בכל רגע, פשוטו כמשמעו תוך שניות ספורות.
כידוע, לכפתורים שלושה עמדות:
הכפתורים יוצגו במלואם בדיוק בכזהדפדפנים כמו Firefox, Safari, Opera, Chrome. במקביל, ב- Internet Explorer 9, לא ניתן להציג את הכפתורים במלואם. לדוגמא, עיגול פינות, צל הטקסט והמשיכה סביב הכפתור לא יהיו גלויים כאן בגלל העובדה שתכונות כאלה אינן נתמכות על ידי דפדפן זה. עם זאת, באופן כללי, לחצני CSS לאתר נראים הגונים בגרסה זו של הדפדפן. ב- Internet Explorer 8 ובגירסאות אחרות שמתחת לשמינית, הכפתור לא יראה את עוצמת הקול, אך יחד עם זאת, נראות השיפועים תישאר.
אם משווים את הכפתור כתמונה לבין הכפתורCSS, ההבדל בשטח השרת יהיה חסר משמעות לחלוטין. אבל כפתורי CSS יפחיתו את מספר הבקשות לשרת וזה כבר יתרון ברור לעומת הכפתור בצורה של תמונה.
מסתבר שגם אם התמיכה של חלקםמכיוון שאין מאפייני CSS בדפדפני Internet Explorer, לחצנים כאלה עדיין ייראו יתרון יותר בהשוואה לתמונות פשוטות, מכיוון שהדבר היחיד שמשתמשים ב- Internet Exporer יאבדו זה לראות את האסתטיקה של טכנולוגיות עיצוב אתרים מודרניות. אך זהו פגם חסר חשיבות לחלוטין.
לכל עמדה סגנון משלה. סגנונות אלה נכתבים בקובץ .css מיוחד או בין תגיות הראש בדף האתר עצמו.
בין תגי הגוף, הקוד כתוב:
שם
id = "button2" כאן פירושו השם שהוקצה לכפתור,
href = "HYPERLINK" כאן מספק קישור ישיר למסמך הנדרש,
TEXT - הטקסט מודפס שיוצג על הכפתור.
1. סגנון כפתור CSS נכתב בנפרד במסמך או בדף עצמו:
ראשית, לחצני CSS נכתבים כשהם במנוחה:
3. בשלב הבא, הפרמטרים התואמים לכפתור נכתבים כאשר הסמן מעליו. אם במקרה זה רק הצבע והמילוי משתנים, הרי שבסגנון הכל נשאר זהה, למעט צבע ומילוי:
4. והפרמטר האחרון נוגע למיקום הכפתור כאשר הסמן נלחץ עליו. לעתים קרובות במקרים כאלה רק מינימום משתנה, למשל צבע, כמו במקרה זה:
אתה יכול להשתמש בשיפוע כדי ליצור כפתורים.עדיף ראשית לצייר כפתור בעורך גרפי, למשל פוטושופ, כדי לדעת בדיוק מה יתברר בסוף. אם אתה משתמש בפוטושופ, אז בהתחלה כבר יש כמה שיפועים, אך בנוסף אתה יכול להוריד גם אחרים, כמו שאתה רוצה להיכנס לאתר.
על ידי ניסוי בקוד CSS ושינוי פרמטרים שונים, ניתן לשנות את הכפתורים היפים של CSS, ועל ידי בחירה, להשיג את התוצאה הרצויה.
פרמטרים אלה הם:
- צבע הטקסט בכפתור;
- גודל טקסט וכפתורים;
- צבע שיפוע כפתור;
- רדיוס של פינות הכפתורים;
- וצבע השבץ שלה.
לאמיתו של דבר, אתה יכול בשקט, ללא חשש, להתנסות ולבחור באפשרות הטובה ביותר. למרות המספר הקטן של הפרמטרים, אתה יכול ליצור כפתורים מגוונים מאוד בסגנון שלהם.
