עיצוב ב CSS3

גמישות, פשטות ומקצועיות בעיצוב דפי אינטרנט

CSS הינם ראשי תיבות ל- Cascading Style Sheets או בעברית גיליונות סגנון מדורגים, והינו פורמט לעיצוב דפי אינטרנט, באמצעות גיליונות אלה, ניתן לקבוע את עיצובם של התגיות ב HTML, XHTML וכל שפה אחרת בסגנון ה XML לבניית אתרי אינטרנט.

 

מהו CSS

עד לפני שה CSS פותח על ידי הקונסורציום הבינלאומי לחקיקת תקינות ברשת (W3C), העיצוב ותוכן האתר נכתבו בשפת ה HTML, דבר אשר הקשה על קריאת הקוד וכתיבתו, כמו כן אם ברצוננו היה לבצע שינוי כלשהו היינו צריכים לבצע מעבר בין הדפים, אמנם כיום ניתן לבצע הכל בקובץ אחד לכל הדפים ביחד, CSS בעצם מספק את הגבול בין עיצוב דפי האתר לבניית מבנה ותוכן האתר.
 
  • הגרסה הראשונה של ה CSS הוכרזה בשנת 1996 אשר אפשר שליטה בצבעים וגופנים, מסגרות ומרווחים וכיום כבר אינו נתמך יותר.
  • בשנת 1998 הוכרז CSS2, גרסה זו מאפשרת שילוב ותמיכה באלמנטים משודרגים יותר כמו מיקום אובייקטים וגבהים למשל.
  • שנה לאחר מכן הוכרז CSS3 ועד עכשיו לא הוכר כתקן רשמי, באמצעותו ניתן לבצע שינויי צבע, הצללות, פינות מעוגלות ושקיפויות.
 
עיצוב ובניית אתרים ב CSS3
 
התמיכה ב CSS3 מאופיינת בעיקר על ידי דפדפן ה Chrome לאחר מכן על ידי Firefox וכמעט ולא על ידי IE.
CSS3 מאפשר עבורנו גמישות רבה בעת עיצוב דפי האינטרנט, כך ניתן ליצור שינויים בגודל התיבה, פינות מעוגלות, הגדרת תמונה כגבול בפשטות רבה יותר וכל זאת ללא כל צורך בתוכנות חיצוניות כגון פוטושופ מבית אדובי.
אפשרות ליצירת אנימציות ו Roll-over ללא צורך שימוש ב JavaScript, אין צורך בהצפת אלמנטים, ניתן לעשות הכל כעת בפשטות רבה יותר באמצעות כמות הסלקטורים ופסאודו אלמנטים אשר CSS3 מצייעה עבורנו כעת.
 

CSS3 – סלקטורים

באמצעות סלקטורים ניתן להגדיר לאילו אלמנטים נוכל להוסיף את כללי ה CSS, בשל הכמות הרבה של הסלקטורים אשר נוספו עם התקן החדש CSS3, נוכל להיות מדויקים יותר בהפעלת כללי ה CSS לעיצוב על אלמנטים נבחרים.
CSS3 מאפשר עבורנו להכיל את כללי העיצוב ב CSS לפי attributes, התאמה ל regular expression והוספת סלקטורים חדשים של Class ו id.
 

מודול תיבה 

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

פינות מעוגלות 

הוספת פינות מעוגלות נהיה טרנד של ממש בזמן האחרון, ואולם שיטת ההוספה של פינות אלו הייתה לא פשוטה, התקן CSS3 מציע לעשות זאת עבורנו על ידי תכונה פשוטה בשם border-radius.
כאשר ערך הביטוי מבוטא באמצעות פיקסלים או באחוזים מציין את מידת העיגול של הפינה בתיבה, ערך גבוה יותר מציין עיגוליות רבה יותר, וכאשר הערך מבוטא באמצעות הספרה 0, הפינות הן קודקודיות ומרובעות, על מנת לבצע את הקוד הזה בדפדפנים השונים נצטרך להוסיף קידומת של moz- ל Firefox וקידומת של webkit- לIE, Chrome, safari.
 

הצללות

גם על מנת לבצע הצללות לא נדרש שימוש בתוכנות חיצוניות כמו פוטושופ, כך ניתן להוסיף הצללות לתיבות או טקסט באמצעות תכונה פשוטה box-shadow, תכונה מעולה שהתווספה ל CSS3 ונתמכת על ידי כל הדפדפנים.
הגדרת הצל דורשת התמקדות בשלושה ערכים, סטייה בכיוון אופקי, סטייה בכיוון אנכי וצבע הצל.
  • סטייה לכיוון אופקי מאפשרת הסטת הצל ימינה או שמאלה בהתאם לערך חיובי או שלילי, בהתאמה.
  • סטייה לכיוון אנכי מאפשרת הסטת הצל למטה או למעלה בהתאם לערך חיובי או שלילי, בהתאמה.
  • הערך השלישי הינו צבע הצל, ככל שהמספרים יתקרבו יותר לערך המקסימלי של RGB (אשר אחראי על ערבום הצבעים אדום ירוק וכחול להשגת הגוון המבוקש) כך יהיה הגוון כהה יותר.

 

 

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