פקודות CSS מתקדמות
במאמרים הקודמים למדנו על פקודות CSS בסיסיות והבנו את הסינטקס גם של הCSS וגם של הHTML , הפעם נראה דברים יפים שאפשר לעשות עם CSS שיוכלו להפנט לקוחות שנכנסים לאתר שלכם.
צבע רקע מדורג בCSS
כדי לעשות רקע מדורג נרשום את הפקודה הבאה –
כמו שאפשר לראות רושמים בדיוק את הצבעים שנרצה והפקודה linear-gradient תיתן לנו את הצבע המדורג
פקודות מעבר עכבר בCSS
עוד פקודה פשוטה שיכולה להוסיף הרבה לנראות ומקצועיות האתר שלכם . אפשר לתת לאלמנטים הוראות מה לעשות כאשר עוברים עליו עם העכבר. אם נרצה שאלמנט ישנה צבע במעבר עכבר צריך לתת לו את הפקודה לאיזה צבע אבל עם hover :
במקרה הזה החלפנו מריבוע אדום לכחול במעבר עכבר , כך תוכלו לעשות עוד הרבה דברים כמו למשל להפוך את התמונה לשחור לבן, שהתמונה תגדל, להחליף כיתוב על התמונה ועוד
פקודות מעברים בCSS
על מעברים נוכל לכתוב כל כך הרבה מאמרים אבל הדרך הכי טובה ללמוד על מעברים היא לנסות בעצמכם לאחר שתבינו את ההגיון.
מעברים למעשה נותנים לכם את האפשרות לשנות את הערכים שנתנו לאלמנטים מאחד לשני לאורך זמן. כדי לבצע זאת צריך להגדיר שני דברים – הראשון האלמנט והערך שנרצה לשנות והשני הוא תוך כמה זמן יתבצע השינוי.
ניקח שוב את הריבוע האדום שהיה לנו ונוסיף לו את הפקודה של משך זמן השינוי 5 שניות , ואז בפקודת מעבר העכבר נשנה לו את האורך וזו התוצאה
כאן יש כמה שינויים שצריך לעשות בהתאם לדפדפן –
לדפדפני כרום וספארי נהיה צריכים להשתמש כמו בדוגמא בwebkit-
לדפדפני פיירפוקס נשתמש ב -moz-
ולדפדפני אופרה נשתמש ב -o-
כדאי ללמוד עוד הרבה על מעברים ואפשר לעשות דברים מדהימים כמו באתרים הכי גדולים בעולם .
תוכלו לראות דוגמה מדהימה של שימוש נכון ב CSS בלבד בדף הזה – מערכת השמש בCSS
