-css "גיליונות סגנון מדורגים" מכילים קבוצה של כללי עיצוב על מנת לשלוט בפריסה ובמראה של דף האינטרנט.
כל הכללים נשמרים במסך אחד או יותר ומקושרים לדף האינטרנט באמצעות קישור, מה שמקל על הסדר והניקיון בקוד של דף האינטרנט ובמהירות הטעינה.
מה CSS שה נותן לנו, זו שליטה מדהימה על המראה של הדף שלך. אתה יכול לשלוט במאפיינים כגון גודל גופן, הדגשה, צללי טקסט וצבע, צבע קישור ועוד.
כמובן ניתן ללכת הרבה מעבר לזה עם כלי פריסת עמוד, תיבות, עיצוב, מיצוב, ועוד. CSS3ל יש אפשרויות רבות, כמה מהם נבחן כאן, אלוכוללים אנימציה, מעברי צבעים,media queries , צללים, אפשרות להטביע גופנים בדף אינטרנט, ועוד.
אנימציות:
בעזרת אפשרות זו אתה יכול להוסיף keyframe animations לתוכן הHTML.
אפשרות CSS זו נותנת לך שליטה על איך אלמנט HTML יפעל באנימציה בתוך דף האינטרנט. עם שיטה זו אתה יכול לעבור מגיליון CSS אחד למשנהו.
ישנם שני מרכיבים עיקריים באנימציה:
כלל עיצובי שמתאר את האנמיצייה ו KEYFRAME לשלוט באנימציה.
ישנן שלוש סיבות להשתמש באנימציות CSS על פני אנמציות
JAVASCRIPT
1. קלות לשימוש, ניתן לעשות זאת ללא ידיעת
JavaScript.
2.הם רצות היטב תחת עומס מערכת
.
3. הדפדפן מנהל אותם בצורה אופטמלית יותר מכוון שהוא מפרש אותם בעצמו
.
Gradients:
ב CSS3, יש תמיכה רבה יותר ב Gradients בכל אלמנט עם צבע רקע. מאפיין זה מאפשר לך מעברים חלקים בין שני צבעים או יותר באמצעות הדפדפן במקום שימוש תמונות.
פעולה זו מפחיתה את זמני הטעינה ווהורדה של הקבצים. הדפדפן תומך בשני סוגים של מילויים: Linear ו Radial. linear gradientמוגדר עם הפונקציה linear-gradient, בעוד Radial מוגדר עם הפונקציה radial-gradient.
:CSS3 Media Queries
מכשירים ניידים שינו בצורה דרמטית את הדרך שבה אנשים משתמשים במיחשוב. בנוסף יש הרבה סוגים שונים של מכשירים, כגון טלפונים חכמים, טאבלטים ושעונים. כל התקן בגודל שונה ומעצבי אתרים מתמודדים עם האתגר לוודא כי אתרי האינטרנט שלהם מוצגים כראוי על כל התקן.
Media Queries נועדו לטפל בבעיה זו. Media Queries מתבססות על CSS2, הם מאפשרים מניפולציות על העיצוב אשר מבוססים על היכולות של הדפדפן, אלה כוללים בחירת תצוגות עיצוב שונות לכל רזולצייה.
בכך אנו מקבלים שליטה רבה יותר על האופן שבו התוכן מוצג ומאפשר למתכנתים לבצע אופטימזציה של התוכן הנראה מכל מסך ומסך.
:CSS3 Shadows
עם אפשרות זו אתה יכול להוסיף צללים לתוכן HTML אפשרות ה box-shadow מאפשרת לך להוסיף צללים לשני אלמנטי התיבה הפנימיים וחיצוניים ואת האפשרות text-shadow ונותנת לנו שליטה של צללי טקסט.
הנה כמה מהאפשרויות עבור האפשרות box shadow: צבע (של הצל), אופסט (בהתייחסו למצב), רדיוס הטשטוש, רדיוס הטשטוש (המאפשר בצל להתרחב לגודל של אובייקט המסגרת).
להלן המרכיבים של כל צל:
• אורך הראשון שולט על הצל הרוחבי
• אורך השני שולט הצל האנכי (מיקום)
• אורך השלישי שולט בשטוש
• אורך הרביעית שולט בהתפשטות של הצל
• הצבע שולט על צבע הצל
• אם נעשה שימוש במילת המפתח inset, הצל משתנה מחיצוני לפנימי.
:CSS3 Transitions
יש לדעת שעדיין נמצא בתהליכי פיתוח ולכן התמיכה בדפדפנים מוגבלת.
עם ,CSS3 Transitions אתה יכול להנפיש מאפייני CSS ואלמנטי HTML, חלק מהאפשרויות הם: rollovers, אנימציה, fades, שינוי צבע מלבן לשחור, ועוד. והחשוב מכל JavaScript אינו הכרחי.
כדאי לקחת בחשבון כי בזמן שהוא קל יותר לשימוש מ CSS3 animations, אתה לא מקבל שליטה מלאה כפי שהיית עושה עם אנימציות CSS3.
Transforms CSS3:
עם Transforms CSS3, אתה יכול להשתמש בסיבוב, שינוי גודל ו הטייה על רכיבי DOM. Transforms CSS3 יכול להתבצע עם CSS3 Transitions, מה שמאפשר לך ליצור אנימציות נשלטות בזמן.
שני מאפיינים עיקריים שולטים ב Transforms CSS והם: transform and transform-origin.
@:font-face
התקנת גופנים בשרת במקום לסמוך על כך שהגופנים מותקנים על מחשב המשתמש.
לסיכום זוהי סקירה קצרה של יכולות ה CSS3 יחד עם ה HTML5 נפתחת לנו אפשרות לבנות דפי אינטרנט אטרקטיבים מונפשים ובעיקר יפים יותר ללא צורך בגורמי צד שלישי ובלי להעמיס על המשאבים ועל מהירות הגלישה
בניית אתרי אינטרנט נעימה לכולם.