נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
מדריכים על CSS3

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

 

מדריך CSS3

מדריך CSS3 - מבוא

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

מדריכים של CSS3

מדריך CSS3 - סלקטורים

CSS3 הוסיף סלקטורים רבים שמאפשרים לבחור אלמנטים באופן מאוד מדויק. לדוגמה, סלקטורים שמבוססים על attributes דוגמת name, או סלקטורים שמאפשרים להעניק דגם פסים לטבלה או לרשימה.

שימוש בסלקטורים מתקדמים של CSS3

מדריך CSS3 - הוספת צל לתיבות ולטקסט

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

CSS3 סיכום box-shadow

 

פינות מעוגלות בעזרת CSS3

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

גרדיאנטים באמצעות CSS3

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

גרדיאנט לינארי באמצעות CSS3

כיצד לשנות צורה באמצעות transform?

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

שינוי של תכונות באמצעות CSS3 והתכונה transform

אנימציות מדליקות באמצעות CSS3

במדריך זה נסקור את הדרך להוסיף אנימציות פשוטות לאתר (roll-over) באמצעות CSS3, ובלי JavaScript או פלאש.

אנימציות מדליקות באמצעות CSS3 - חלק ב

אחרי שבמדריך הקודם למדנו להוסיף אנימציות מדליקות באמצעות התכונה transition של CSS3 , במדריך הנוכחי נלמד כיצד להוסיף אנימציות משוכללות יותר באמצעות התכונות animate ו-keyframes.

תכונות רקע חדשות שמציע CSS3

באמצעות CSS3 קל יותר לעצב את הרקע מפני שניתן להוסיף מספר תמונות אחת מעל לשנייה, ומפני שניתן לשנות את ממדיו של הרקע.

כיצד להשתמש בתכונה background של CSS3

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

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

התכונה box-sizing של CSS3

אם גם לך נמאס שממדי אלמנט משתנים כשמוסיפים לאלמנט border או padding כדאי שתכיר את תכונה box-sizing. זו אומנם לא תכונה חדשה ממש, אבל השימוש בה הפך לנפוץ רק בשנים האחרונות באתרים מודרניים כי זו תכונה שמפשטת את קוד ה-CSS.

 

איך לעצב אתר רספונסיבי בעזרת CSS3?

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

כיצד להשתמש ב-CSS3 לצורך עיצוב רספונסיבי של אתרי אינטרנט

 

CSS3 - מודל התיבה הגמישה flex box model

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

 

עיצוב checkbox ו-radio באמצעות CSS3

אחת המשימות שמפתחים מתקשים אתם במיוחד היא שינוי מראה ה-checkbox וה-radio buttons בטפסים. במדריך זה נלמד כיצד להשתמש ב-CSS3 להשגת המטרה.