CSS3 מעגלים סגלגל אליפטי [CSS3 טיפים]

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

תחביר הדרגתי

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

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

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

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

מקור: רשת המפתחים של מוזילה.

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

 גוף background-image: רדיאלי-שיפוע (מרכז מרכז, כיסוי אליפסה, # ffeda3, # ffc800);  

כדי ליצור את מעגלית שיפוע אנחנו יכולים פשוט לעשות את זה ככה:

 גוף background-image: רדיאלי-שיפוע (מרכז מרכז, מעגל שער, # ffeda3, # ffc800);  

כפי שהשם מרמז, הצורה ההדרגתית תהיה מעגל.

תמיכה בדפדפן

עם זאת, שים לב, כל הדפדפנים עדיין נמצאים בתהליך של מתן תמיכה מלאה לתכונה זו, ולכן הם עדיין זקוקים לקידומת הספק. לכן, תחביר שלם שלם שיעבוד בכל הדפדפנים המודרניים - IE10 +, Firefox 3.6+, Chrome 4.0 ואילך, Safari 4.0+ ו- Opera 11+ - ייראה משהו כזה;

 גוף background-image: רדיאלי-שיפוע (מרכז תחתון, כיסוי אליפסה, # ffeda3, # ffc800); background-image: -O-radial-gradient (מרכז תחתית, כיסוי אליפסה, # ffeda3, # ffc800); background-image: -ms-radial-gradient (מרכז תחתית, כיסוי אליפסה, # ffeda3, # ffc800); background-image: -moz-radial-gradient (מרכז תחתית, כיסוי אליפסה, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (מרכז תחתית, כיסוי אליפסה, # ffeda3, # ffc800);  

בדוק את ההדגמה או הורד את המקור כדי לשחק עם gradients.

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

מילים סופיות

יצירת CSS CSS רדיאלי לא קשה כמו שאתה חושב, ובמיוחד כאשר אתה מקבל עזרה כלים אלה ליצירת קוד:

• צבע
• Gradientoo

שיפוע רדיאלי הוא רק סוג אחד של gadients CSS3, נמשיך את הדיון שלנו בנושא בפוסטים עתידיים, אז תישאר מכוון ל- Hongkiat.com