CSS3 חוזרים Gradients [CSS3 טיפים]

ישנם תכונות רבות CSS3 לשנות את הדרך שבה אנו לקשט אתר אינטרנט, אחד מהם הוא CSS3 Gradients. לפני CSS3, אנחנו בהחלט צריכים תמונות כדי ליצור את אפקט הדרגתי; כעת אנו מסוגלים לספק את אותן השפעות (וטוב) על ידי שימוש ב- CSS בלבד

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

• רדיאלי ו
• מחלקות לינאריות.

הפעם אנחנו הולכים לבדוק את אחיהם: חוזרים חוזרים.

חזרה בסיסית

מחזורים חוזרים הוא למעשה הרחבה. התחביר דומה לאופן שבו אנו מגדירים מעברים רדיאליים וליניאריים, אלא שכפי שהשם מרמז, הוא יחזור גם על הצבעים בכיוון מסוים. כדי לחזור על מעבר ליניארי, אנו יכולים להשתמש בפונקציה זו: חוזר- linear- שיפוע, בעוד לחזור על gradial רדיאלי או אליפטי אנו משתמשים בפונקציה זו: חוזר- רדיאלי- gradient.

 / * ליניארי * / .gradient רקע: חוזר-ליניארי- gradient (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient background: repeatating-radial-gradient (50% 50%, circle, # f9f9f9, #cccccc 20px);  

אין הרבה הבדל עבור שאר על קוד, למעט צבע חזרה. להלן איור פשוט כדי לתאר איך זה צבע החזרה עובד.

למרות שהתמונה הנ"ל מלמדת רק על מעבר צבע ליניארי חוזר, הרעיון הבסיסי חל גם על מעברי רדיאליים שבהם הצבעים יחזרו על עצמם ללא הרף, במקרה זה, בכל כיוון. בצע את הקישור הבא כדי לראות את ההדגמה.

• הצג הדגמה

בחלק הבא, אנו נראה לך כיצד אנו יכולים לעשות שימוש CSS3 חוזרים Gradients בדוגמאות אמיתיות.

דוגמה: יצירת תבניות

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

 .שיפוע background: חוזר-ליניארי-שיפוע (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

שימו לב כיצד אנו מגדירים שני צבעים שונים - # f9f9f9 ו #cccccc - באותה נקודה, 20px. דוגמה זו תחדד את ההבדל בין שני הצבעים האלה ותמנע את הפליאה.

כדי לכוון את הכיוון אנו פשוט לשנות את הזווית - 90deg יהיה לכוון אותו אופקית בעוד 45deg יכוון אותו באלכסון וכן הלאה.

• הצג הדגמה

דוגמה: יצירת Paperline

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

 .שיפוע רוחב: אוטומטי; גובה: 500px; שוליים: 0 50px; רקע: -webkit-repeatating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -moz-repeatating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); רקע: -o-repeatating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); רקע: חוזר-ליניארי-שיפוע (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background-size: 100% 21px;  

שימו לב שהוספנו גם CSS3 גודל הרקע כדי לציין את הגדלים של תמונות רקע עבור 100%, 20px. למרות ש- CSS3 Gradients מציגים 'צבעים', הוא מסווג למעשה כתמונה, לא צבע.

הבא, נשתמש :לפני אלמנט פסאודו כדי להוסיף פס בצד שמאל של הנייר.

 .gradient: before content: ""; הצג: inline-block; גובה: 500px; רוחב: 4px; border-left: 4px double # FCA1A1; מקומות קרובים משמאל: 30px;  

ועשינו, זה באמת פשוט נכון? כעת אנו יכולים לראות את כולם בפעולה מהקישורים הבאים.

• הצג הדגמה
• הורד מקור

משאבים נוספים

• CSS3
• גרסאות CSS3 ברשת המפתחים של מיקרוסופט