CSS למתקדמים

פקודות CSS מתקדמות

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

צבע רקע מדורג בCSS

כדי לעשות רקע מדורג נרשום את הפקודה הבאה –

See the Pen gradiant by henry (@superwebdigital) on CodePen.

כמו שאפשר לראות רושמים בדיוק את הצבעים שנרצה והפקודה linear-gradient תיתן לנו את הצבע המדורג 

פקודות מעבר עכבר בCSS

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

 

See the Pen hover by henry (@superwebdigital) on CodePen.

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

פקודות מעברים בCSS

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

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

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

See the Pen transition by henry (@superwebdigital) on CodePen.

כאן יש כמה שינויים שצריך לעשות בהתאם לדפדפן –

לדפדפני כרום וספארי נהיה צריכים להשתמש כמו בדוגמא בwebkit- 

לדפדפני פיירפוקס נשתמש ב -moz-

ולדפדפני אופרה נשתמש ב -o-

כדאי ללמוד עוד הרבה על מעברים ואפשר לעשות דברים מדהימים כמו באתרים הכי גדולים בעולם . 

תוכלו לראות דוגמה מדהימה של שימוש נכון ב CSS בלבד בדף הזה – מערכת השמש בCSS

Facebook
Google+
Twitter
LinkedIn
ספאמר בוורדפרס
טיפול בתגובות ספאם בוורדפרס

אם אתם משתמשים ותיקים בוורדפס כבר למדתם להכיר את תגובות הזבל שמקבלים באתר – רוב אתרי הוורדפרס מלאים בטפסים ובתגובות בצורה שלבוט קל מאוד לסרוק,

קרא עוד »
מה זה תבנית בת בוורדפרס
יצירת תבנית בת בוורדפרס

מה זה תבניות בת ואיך עושים אותן תבנית בת בוורדפרס (Child Themes) במאמרים הקודמים הסברנו על תבנית וורדפרס ומה היא יכולה לעשות ולמרות זאת יש

קרא עוד »
עריכת קבצי וורדפרס
עריכת קבצי וורדפרס

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

קרא עוד »
לוגו וורדפרס
מדריך וורדפרס למתחילים חלק ב

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

קרא עוד »
לוגו וורדפרס
מדריך וורדפרס למתחילים

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

קרא עוד »
css-css-super-web