תוֹכֶן
באמצעות קוד CSS, ניתן ליצור רקע מפוספס עבור דף אינטרנט ללא שימוש בגרפיקה. אפקט זה משתמש ברמות הדרגתי CSS עם מעברי צבע מרובים, כמו גם את גודל הרקע המאפיין כדי להפוך את וקטור מעבר צבע על פני המסך. הדרך הטובה ביותר לעשות זאת היא להתחיל עם צבע רקע מוצק ולעשות אחד הפסים שקוף שלך עבור הצבע להיות מודגשת. משתמשים שביקרו בדף שלך באמצעות דפדפני אינטרנט ישנים יראו צבע אחיד.
הוראות
-
פתח את קובץ גיליון CSS של CSS בפנקס הרשימות או בתוכנית לעריכת קוד. הוסף כלל זה לסוף הקובץ:
html {גובה: 100%; }
כלל זה מאפשר למלא את הרקע כולו של דף אינטרנט עם פס שיפוע זה ייצר.
-
הגדר צבע רקע עבור הדף שלך בתוך "html {}" כדי לספק את צבע הבסיס עבור הפסים שלך ואת ברירת המחדל עבור דפדפנים ישנים:
html {גובה: 100%; צבע רקע: שחור; }
-
הוסף את הקוד הבא לברירת המחדל שלך "html {}" כדי ליצור אפקט פס אופקי:
תמונת רקע: שיפוע ליניארי (50% שקופים, 50% לבנים);
זה יהיה ליצור שתי הפסקות צבע, הראשון להיות שקוף והשני להיות לבן. כל הפרעה צבע לוקח 50% של שטח שיפוע על המסך. כוונן את רוחב הרצועות על-ידי שינוי ערכי האחוזים.
-
הוסף ערך אפס להפסקת הצבע הראשונה והפרד אותו בפסיק:
רקע-תמונת: שיפוע ליניארי (0, שקוף 50%, שחור 50%);
זה יהיה למקם את הפסים אנכית, במקום למקם אותם אופקית.
-
שכפל את מאפיין תמונת הרקע ואת הערכים שלו בשורה חדשה. לעשות זאת פעמיים, יצירת שלושה קווים עם אותו קוד. הוסיפו את הקידומת "-moz" לשיפוע הליניארי באחד מקווי הקוד המשוכפלים. הוסף את הקידומת "-webkit" לשורה הכפולה השנייה:
תמונת רקע: שיפוע ליניארי (0, שקוף 50%, לבן 50%); background-image: -Moz-linear-gradient (0, שקוף 50%, לבן 50%); תמונת רקע: -webkit-linear-gradient (0, שקוף 50%, לבן 50%);
-
הגבל את ההדרגה לסכום מסוים של פיקסלים על ידי הגדרת גודל הרקע בשורה הבאה בקוד ה- CSS שלך:
background-size: 20px;
שנה את מספר פיקסלים בגודל רקע לשינוי גודל ההדרגה. בשל החזרה המתמדת של שיפוע רוחב הדף, כל חזרה תתאים לקבוצת פסים על המסך.
הוראות
שים לב
- חלק מהדפדפנים הישנים אינם תומכים במעברי CSS3. כאשר ברצונך להציג פסים עבור כל סוגי הדפדפנים, השתמש בהערות מותנות כדי לכלול גיליון סגנונות עם תרשים חוזר.