יצירת תמונת CSS-only לחשוף אפקט עם גבולות שקופים

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

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

 .foo --bgc: # FFCC03; --dim: 300px; רוחב: var (- עמום); גובה: var (- עמום); צבע רקע: var (- bgc); מקומות קרובים  

אנחנו הוסף ריק תוכן נכס לשני אלמנטים פסאודו, .foo :: לפני ו .foo :: אחרי, כדי לקבל אותם כראוי שניתנו.

 .foo :: before, .foo :: after content: ": position: absolute; left: 0; top: 0; 

ה .foo אלמנט, שני אלמנטים פסאודו שלה, .foo :: לפני, .foo :: אחרי, שלהם : רחף כיתות פסאודו לקבל המעבר נכס זה יהיה להוסיף מעבר נוח להם 500 מילי-שניות (חצי שנייה).

 .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transfer: transform 500ms easy-in;  

2. הוסף את התמונה

אנחנו מוסיפים את התמונה ל .foo :: לפני אלמנט פסאודו כתמונת רקע, ו גודל זה כדי לכסות את כל אלמנט pseudo עם ה רוחב ו גובה נכסים. אנחנו ערימה אותו ממש מתחת .foo אלמנט משתמש ב z-index you -1 הכלל.

 .foo :: before width: 100%; גובה: 100%; רקע: מרכז / כריכה של url (camel.png); z-index you -1;  

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

על צילום מסך למטה אתה יכול לראות מה יש לנו עד כה (z-index מוסר מ .foo :: לפני כך ניתן לראות):

3. הוסף את הרקע החוצה

כדי להוסיף את קטן (שקופיות) רקע מאחורי התמונה, נשתמש באלמנט הפסוודו האחר, .foo :: אחרי.

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

 .foo :: after --b: 20px; רוחב: 100% - var (- b)); גובה: calc (100% - calc (var (- b) * 2); border: var (- b) מוצק שקוף; border-left: none; box-shadow: inset 0 var (- dim) 0 var (- bgc); מסנן: בהירות (.8); z-index: -2;  

ה רוחב מחושב כ קלס (100% - var-b)) זה חוזר הרוחב הכולל של .foo ללא רוחב הרוחב הכולל של הגבולות האופקיים (הגבול הימני בלבד, שכן אין גבול שמאל).

ה גובה מחושב כ קלס (100% - קלס (var (- b) * 2)) זה חוזר הגובה הכולל של .foo ללא רוחב הכולל של הגבולות האנכיים (הגבולות העליונים והתחתונים).

עם ה צל קופסא רכוש, אנחנו גם הוסף צל אופקי של גודל זהה .foo (שהוא var (- עמום)).

מסנן CSS של בהירות (.8) מחשיך את צבע הרקע קצת, ולבסוף, את z-index: -2 הכלל מקומות- ::לאחר אלמנט מדומה מתחת ::לפני שמכיל את התמונה.

הנה ה צילום מסך של ההדגמה שניתנו עד כה (עם z-index הוסר משני אלמנטים פסאודו כך שהם נראים):

4. הוסף את השינוי

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

כפי שאנו כבר הוסיף המעבר רכוש לכל האלמנטים בסוף שלב 1, התנועה של התמונה ואת הרקע שלה שניהם אנימציה.

 .foo: רחף :: לפני, .foo: hover :: after transform: translateX (100%);  

למטה, אתה יכול לראות את הדגמה סופית.

בונוס: שולי אופציונלי

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

 .foo: העבר את השוליים margin-right: var (- dim);