מדריך למתחילים ל- CSS3
מאז ההכרזה על 2005, את הפיתוח של רמה 3 של גיליון סגנון מדורגים או הידועה יותר בשם CSS3 כבר צפו מקרוב ומעקב על ידי מעצבים רבים ומפתחים. כולנו נרגשים לקבל את ידינו על התכונות החדשות של CSS3 - צללי טקסט, גבולות עם תמונות, אטימות, מספר רקעים, וכו ', רק כדי שם כמה.
נכון להיום, לא כל בוררי CSS3 נתמכים במלואם. אבל זה לא אומר שאנחנו לא יכולים לקבל קצת כיף בדיקות דברים חדשים CSS3. פוסט זה מוקדש לכל מעצבים ומפתחים שכבר מכירים את CSS 2.1 ורוצים לקבל את הידיים שלך מלוכלך ב- CSS3.0.
זה אוסף של שימושי CSS3 קורא, קודים לדוגמה, טיפים, הדרכות, לרמות יריעות ועוד. אתה מוזמן להשתמש בהם בפרויקטים שלך, רק לוודא שהוא נופל בחינניות על דפדפנים שאינם תואמים.
תחילת העבודה עם CSS3
מבוא ל CSS3
מפת הדרכים הרשמית ל- CSS ו- CSS3. מסמך זה נותן לך רעיון כולל על פיתוח CSS3.
CSS3: קח עיצוב לשלב הבא
היתרונות של CSS3, עם הסברים ודוגמאות של תכונות CSS3 ו בוררים.
כמה טריקים עם CSS3
Webmonkey מביא אותך דרך כמה טריקים בסיסיים ב CSS3, כולל גבולות מעוגל, גבולות, טיפות צלילה, טריקים תמונה ועוד.
ראיון: שש שאלות עם אריק מאייר על CSS3
אנשים ב- Six Revision ראיין את אריק מאייר עם תובנות ותשובות יקרות ב- CSS3.
CSS3: שיפור פרוגרסיבי
כיצד תוכל להשתמש בטכניקות שיפור חינניות (או מתקדמות) כדי לעשות שימוש בתכונות CSS3 בדפדפנים התומכים בהם, תוך הקפדה שהקוד שלך יספק חוויית משתמש משביעת רצון בדפדפנים ישנים יותר שעדיין אינם תומכים בתכונות אלה.
CSS3: רקע גבולות
גבולות מעוגלים (רדיוס הגבול)
מדריך ליצירת גבול מעוגל עם CSS3 רדיוס הגבול נכס.
גבולות מעוגלים עם תמונה (תמונות גבול)
כיצד להשתמש בתמונות עם גבולות תמונת גבול נכס.
גבולות CSS3, רקעים ותיבות
הסבר מפורט עם דוגמאות של תכונות CSS3 חדשות כגון: רקע קליפ, מקור הרקע, רקע-קובץ מצורף, צל קופסא, תיבת-קישוט-הפסקה, רדיוס הגבול ו תמונת גבול.
CSS3: טקסט
אפקט מכתבים
יצירת אפקט Letterpress פשוט עם CSS3.
שישה אפקטים טקסט באמצעות צל טקסט
אפקטים טקסט כוללים: וינטאג / רטרו, ניאון, inset, anaglyphic, אש ואת לוח המשחק.
טיפוגרפיה יפה
כיצד לקחת סימון בסיסי ולהפוך אותו עיצוב טיפוגרפי יפה ויפה באמצעות CSS3 טהור.
סיבוב טקסט
משתמש ספרייט תמונה ומפזרים של CSS כדי לקבל דברים ממוקמים הנכון.
טקסט מתאר
כיצד להוסיף מתאר, או שבץ, לטקסט שלך באמצעות CSS3 טקסט שבץ נכס.
אפקט מסיכת טקסט
אפקטי מסכת טקסט אינטראקטיביים באמצעות צל טקסט מאפיין CSS.
קישור nudging (אנימציה) עם CSS3
תעלה Javascript וליצור אפקט דחיפה לחלוטין עם CSS3.
בחירת סגנון CSS
שינוי סגנון עיצוב טקסט עם CSS3.
CSS3: תפריט
תוכן מרובה עמודות
באמצעות CSS3 כדי ליצור קבוצה של עמודות באתר האינטרנט שלך מבלי להקצות שכבות בודדות (או) פסקאות עבור כל עמודה.
סקטי Tooltips רק עם CSS
כיצד להשתמש בתקן CSS מתפתח יכול לשפר כמה תיאורים מקסים הדפדפן חוצה.
הסבר נוסף:
- הסבר קצר CSS3
- תיאורי כלים עם CSS3.
תפריט נפתח
כיצד ליצור Apple.com כאחד מרובת רמות התפריט הנפתח באמצעות רדיוס הגבול, צל קופסא, ו צל טקסט.
CSS3 בלבד לשוניות
לחץ על הכרטיסייה, להסתיר את כל לוחות, להציג את אחד המתאים לשונית פשוט לחץ על כל עם CSS.
3D סרטים עם CSS3
צור נחמד 3D סרטים עם רק CSS3.
CSS3: צל ירידה
צל צלל בתמונה
הצג כמה טכניקות וכמה הופעות אפשריות עבור הטלת צללים ללא שימוש בתמונות.
זוהר כרטיסיות עם צל תיבת
כיצד ליצור כרטיסיות אינטואיטיבי ויפה ב- CSS3 ללא תמונה.
CSS3: לחצנים
ערכת לימוד: לחצנים יפים
כיצד ליצור לחצני CSS3 יפים תואמים לדפדפנים שפוגעים בחן.
בועות דיבור
צורות שונות של אפקט בועה דיבור שנוצר עם CSS 2.1 ומשופר עם CSS3.
הכפתורים של גייתוב
אוסף של לחצנים המציגים מה אפשרי באמצעות CSS3 תוך שמירה על הסימון הפשוט ביותר האפשרי.
ספינינג, דהייה עם סמלים CSS3 ו MooTools
כיצד להשתמש ב- CSS3 וב- MooTools כדי ליצור אלמנטים דימאניים, מסתובבים.
שכבת על של תמונה
יישום מעשי של המאפיין CSS-image CSS.
יותר
- CSS3 + Mootools. דוגמה של ניסויים ב mootools. זה מוסיף תכונות CSS3 לעבודה הליבה MooTools הליבה.
- פיצוץ לוגו עם CSS3 ו MooTools או jQuery. קח תמונה סטטית ולהפוך אותו אנימציה, אפקט מתפוצץ על העכבר מעל.
- כוחו של HTML 5 & CSS 3. HTML 5 ו CSS 3 הם במהירות צובר פופולריות, Pressishable לחץ כאן כדי להסביר כיצד ומדוע.
- ספינינג קרני עם CSS3 אנימציות & דוגמה. פשוט ו מתוחכם קרן ספינינג אפקט בחלק האחורי של התמונה.
- גלריית תמונות. איך לבנות מגניב להסתכל ערימה של תמונות Polaroid עם סגנון CSS טהור.
- HTML 5 ו CSS 3: טכניקות תוכל בקרוב להשתמש. הדרכה על בניית בלוג מהיסוד עם HTML5 ו- CSS3.
Cheatsheets & הפניות
גיליון בגידה (PDF)
גייז להדפסה עם רשימה מלאה של כל המאפיינים, סוגי בורר ומאפשר ערכים במפרט CSS3 הנוכחי מ W3C.
תמיכה ב- CSS 9.5
רשימה מלאה של בוררי CSS הנתמכים ב- Opera 0.5.
גופנים זמינים עבור @ font-embedding
רשימה מקיפה של גופנים המורשים כעת @סוג גופן הטבעה.
CSS 3 בוררים - הסבר
מדריך והתייחסות לבחירת CSS3 ודפוסים.
CSS- דפדפן CSS מחולל
CSS3 כללים אתה יכול להעתיק ולהדביק על גליון סגנונות משלך.
CSS לחץ על תרשים
קבל CSS3 סגנונות כמו גודל תיבת, רדיוס הגבול, צל טקסט, ועוד בתוך קליק.
תוכן CSS & דפדפן תאימות
רשימה מלאה של טבלאות בחירה של CSS ו- CSS3 יחד עם הצהרה לבדיקת תאימות לדפדפן.
