CSS3 תמונה השתקפות [CSS3 טיפים]
עד כה, דנו הרבה נכסים חדשים CSS3. מעבר לכך, יש למעשה כמה נכסים אחרים שאינם נכללים כרגע מפרט CSS3 הרשמי כי הם בשווי לנסות, שאחד מהם הוא תיבת שיקוף רכוש שיזם Webkit. מאפיין זה יכול לשקף את האובייקטים שצוין.
השתקפות בסיסית
היישום הבסיסי הוא די אינטואיטיבי; נניח, אנחנו רוצים את ההשתקפות מתחת לאובייקט האמיתי. אנחנו יכולים לכתוב:
img -webkit-box-reflect: below;
דוגמה זו מראה כיצד אנו משקפים תמונה להלן (את המיקום) את האובייקט. אבל, במקרה זה, אנחנו יכולים גם להחזיק את ההשתקפות ימין, שמאלה, ו מעל.
השתקה קיזוז
קיזוז משמש להגדרת הפער בין ההשתקפות לבין האובייקט האמיתי המשתקף. כעת נראה את קטע הקוד.
img -webkit-box-reflect: below 10px;
בקוד לעיל, הפרנו את ההשתקפות מן האובייקט האמיתי על ידי 10px;
- הצג הדגמה
מסיכה עם מעברי צבע
השפעת ההשתקפות שאנחנו בדרך כלל רואים רק את fade-out בתחתית מוצג רק חצי או פחות של האובייקט האמיתי. כדי לשכפל סוג זה של אפקט, אנחנו יכולים להגיש בקשה גרסאות CSS כדי להסוות את האובייקט, כך;
-webkit-box-reflect: under 0px -webkit-gradient (ליניארי, שמאלי למעלה, תחתית שמאל, מ (שקוף), ל (rgba (250, 250, 250, 0.1));
קוד זה יביא למצגת הבאה;
אנחנו יכולים גם להשתמש צבע כדי לשלוט במעברים ולעשות את המראה השתקף nicer:
img -webkit-box-לשקף: מתחת 0px -webkit-שיפוע (ליניארי, למעלה משמאל, למטה משמאל, מ (שקוף), צבע-stop (70%, שקוף), כדי (RGBA (250, 250, 250, 0.1 )));
- הצג הדגמה
חלופות עבור
עם זאת, תכונה זו פועלת רק בדפדפני Webkit (כלומר Safari ו- Chrome). כדי לספק את אותו אפקט ב- Firefox, אתה צריך עוד נתיב: באמצעות -moz-element () פונקציה. פונקציה זו למעשה יפיק או לשכפל את התוכן מרכיבי HTML ספציפיים. בואו נסתכל על הדוגמה הבאה;
יש לנו תמונה עטופה ב וגם, כדי להחזיק את ההשתקפות, נשתמש ה למרבה הצער, עדיין אין דרך קלה ליצור נחמד אפקט השתקפות ב- Firefox באמצעות תרגול זה. הקוד לעיל פשוט ליצור את השתקפות, ללא אפקט דהייה.moz משקפים id
:לאחר אלמנט פסאודו, כדלהלן; # moz-reflect: after content: ""; בלוק תצוגה; רקע: -Moz-element (# moz-reflect) לא חוזר; רוחב you אוטומטי; גובה: 375px; margin-bottom: 100px; -Moz-transform: קנה מידה (-1);
-moz-transform עם קנה מידה שלילי משמש להעיף את האובייקט שנוצר הפוך. כמו כן, ודא גובה היא די מדויקת לאובייקט האמיתי גובה כדי למנוע קווים מיותרים נוספים למיקום השתקפות.הפניות נוספות
