CSS3 באמת מתחיל לצבור תאוצה עם רבים של פקודות המפורטים בטיוטת עבודה CSS3 נתמך על ידי Firefox, Safari ו-Google Chrome. חשבנו יחד כמה המועדפים שלנו. לפני שנוכל להתחיל CSS3 פקודות דורשים תחביר דפדפן ספציפי להם לעבוד.

עבור Mozilla Firefox אנו צריכים להשתמש-moz-הקידומת, לדוגמא:

-Moz-הגבול רדיוס:

ובשביל הספארי-WebKit-הקידומת, לדוגמא:

-WebKit, הגבול רדיוס:

1. הגבול רדיוס

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

/ * עבור Mozilla Firefox * /
-Moz-הגבול רדיוס: 20px;

/ * עבור Safari & Google Chrome * /
-WebKit, הגבול רדיוס: 20px;
}

2. תיבת צל

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

1. מרחק אופקי לקזז צל - ערך חיובי פירושו בצל יטיל ימינה ערך שלילי שמאלה
2. מרחק אנכי קיזוז של צל - ערך חיובי פירושו בצל יטיל להלן ערך שלילי לעיל
3. איך מטושטשת תרצה הצל

עם תוספת של ערך צבע הצל המלא:

/ * עבור Mozilla Firefox * /
-Moz-box-צל: 5px 5px 5px # b6ebf7;

/ * עבור Safari & Google Chrome * /
-Webkit-box-צל: 5px 5px 5x # b6ebf7;

3. שקיפות או RGBA

שקיפות תמיד היה מסובך. דפדפנים שונים מבחינה היסטורית יש להחיל שקיפות באמצעות פקודות שונות. המשך חוסר העקביות הזה לדפדפנים יש לנו תוספת של הנכס החדש רקע RGBA CSS3, אולם באופן עקרוני פקודה זו היא הגיונית יותר. הפקודה כוללת 4 ערכים - הראשון, השני והשלישי הם אדום, ירוק & כחול ערכים (0-255) ואחריו בהתאמה, על ידי ערוץ אלפא או שקיפות (0-1).

עבור הפקודה RGBA את הקידומות דפדפן ספציפי (-moz-,-WebKit-) אינם נדרשים:

# Box3 {
צבע הרקע: RGBA (110, 142, 185, 0.5);
}

הפקודה צבע הרקע מוסיף רקע נחמד כחול אפור ב 0.5 או אטימות של 50% בדפדפנים להבין את המאפיין RGBA CSS3.

למרבה הצער Internet Explorer גם ניסיון להבהיר את הפקודה צבע הרקע, אך לא להבין RGBA. כדי להבטיח את צבע הרקע מוגדר גם ב-IE גרזן IE בלבד נדרשת. בדוגמה הבאה: ילד האחרון בורר פסאודו אשר Internet Explorer אינו מבין משמש כדי להוציא אותו.

הגוף: הילד האחרון # box3 {
/ * תכלול את כל הדפדפנים IE באמצעות: הילד האחרון * /
צבע הרקע:! RGBA (110, 142, 185, 0.5) חשוב;
}

4. עמודות

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

/ * עבור Mozilla Firefox * /
-Moz-טור-count: 2;
-Moz-טור הפער: 20px;
-Moz-טור שלטון: מוצק 1px # 6e8eb9;

/ * עבור Safari & Google Chrome * /
-WebKit עמודות-count: 2;
-WebKit טור, הפער: 20px;
-WebKit טור שלטון: מוצק 1px # 6e8eb9;
}

5. רקע מספר תמונות

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

כדי למקם תמונה על הן על ימין ועל שמאל של אלמנט אתה יכול להשתמש בפקודות הבאות, עם עיצוב קצת:

padding: 0 20px;
}

פקודה זו תהיה אי - שניתנו על ידי Internet Explorer כפי שהוא אינו מקבל 2 תמונות רקע על אלמנט אחד. לכלול IE כל גרזן נדרשת.

# Box5 blockquote {
/ * עבור כל הדפדפנים, רק לצטט פתוח * /
רקע: url (/ i / quotel.gif) 0 0 לא חוזר;
padding: 0 20px;
}

הגוף: הילד האחרון # box5 blockquote {
/ * תכלול את כל הדפדפנים IE באמצעות: הילד האחרון * /
/ * אז שתי תמונות * /
רקע: url (/ i / quotel.gif) לא חוזר 0 0, url (/ i / quoter.gif) לא חוזר 100% 0;
}

6. רקע הדרגתיים

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

דוגמה זו של שיפוע CSS3 ב-Mozilla Firefox חל צבע תכלת בחלק התחתון של תיבת עבור 20% בלבד מגובה 'תיבות

ספארי משתמשת בגישה פחות אינטואיטיבי אבל גמישה יותר באמצעות ערכים להפסיק צבע. דוגמה לקוד ספארי ספציפיים כדלקמן (שימו לב ליניארי נכלל בסוגריים במקום בחוץ):

# Box8 {
רקע:-WebKit, שיפוע (למטה ליניארי, שמאל, למעלה משמאל, צבע-stop (0, # b6ebf7), צבע-stop (0.20, # fff));
}

7. רוטציה

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

<code> # box9 {
-Moz-transform: לסובב (2deg);
-Webkit-transform: לסובב (2deg);
} </ Code>

8. מתווה

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

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

מתויק תחת: CSS על ידי admin