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

עברנו כעת על סדרת פוסטים על גישות מעניינות לאפקטי ריחוף של CSS. התחלנו עם א חבורה של דוגמאות המשתמשות ב-CSS background נכסים, ואז עבר ל- text-shadow נכס איפה מבחינה טכנית לא השתמשנו באף צללים. שילבנו אותם גם עם משתני CSS ו calc() כדי לייעל את הקוד ולהקל על ניהולו.

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

---

הנה רק טעימה ממה שאנחנו מכינים:

רחף אפקטים באמצעות background-clip

בוא נדבר על background-clip. מאפיין CSS זה מקבל א text ערך מילת המפתח המאפשר לנו להחיל מעברי צבע על טֶקסט של אלמנט במקום הממשי רקע.

כך, למשל, אנו יכולים לשנות את צבע הטקסט ברחף כפי שהיינו משתמשים ב- color מאפיין, אבל בדרך זו אנו מפעילים את שינוי הצבע:

כל מה שעשיתי זה להוסיף background-clip: text לאלמנט ו transition מה היא background-position. לא צריך להיות יותר מסובך מזה!

אבל נוכל להשתפר אם נשלב שיפועים מרובים עם ערכי חיתוך רקע שונים.

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

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

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

רק שרטנו את פני השטח של מה שאנחנו יכולים לעשות עם שלנו background-clipכוחות פינג! עם זאת, טכניקה זו היא כנראה משהו שהיית רוצה להימנע משימוש בייצור, מכיוון ש-Firefox ידוע כבעל א הרבה באגים שדווחו קשור background-clip. לספארי יש גם בעיות תמיכה. זה משאיר רק Chrome עם תמיכה מוצקה לדברים האלה, אז אולי פתח אותו כשנמשיך.

בואו נעבור לאפקט ריחוף אחר באמצעות background-clip:

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

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

מגניב נכון? בואו ננתח את הקוד:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

יש לנו שלוש שכבות רקע - שני מעברי צבע ו- background-color מוגדר באמצעות --_c משתנה שמוגדר בתחילה לשקוף (#0000). על ריחוף, אנו משנים את הצבע ללבן ואת --_c משתנה לצבע הראשי (--c).

הנה מה שקורה בנושא transition: ראשית, אנו מיישמים מעבר לכל דבר אך אנו מעכבים את color ו background-color by 0.5s כדי ליצור את אפקט ההזזה. מיד לאחר מכן, אנו משנים את color ו background-color. ייתכן שלא תבחינו בשינויים ויזואליים מכיוון שהטקסט כבר לבן (בזכות ההדרגה הראשונה) והרקע כבר מוגדר לצבע הראשי (הודות למעבר השני).

לאחר מכן, ביציאה מהעכבר, אנו מחילים שינוי מיידי על הכל (שימו לב ל 0s עיכוב), למעט ה color ו background-color שיש להם מעבר. זה אומר שאנחנו מחזירים את כל ההדרגות למצבים ההתחלתיים שלהם. שוב, כנראה שלא תראה שינויים חזותיים בגלל הטקסט color ו background-color כבר השתנה עם ריחוף.

לבסוף, אנו מיישמים את הדהייה על צבע וא background-color כדי ליצור את החלק של הוצאת העכבר של האנימציה. אני יודע, זה עשוי להיות מסובך לתפיסה, אבל אתה יכול לדמיין טוב יותר את הטריק על ידי שימוש בצבעים שונים:

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

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

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

אם אתם תוהים למה הגעתי לתחביר RGB עבור הצבע הראשי, זה בגלל שהייתי צריך לשחק עם שקיפות האלפא. אני גם משתמש במשתנה --_t כדי להפחית חישוב מיותר בשימוש ב transition נכס.

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

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

אפקטי ריחוף באמצעות CSS mask

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

נתחיל בבניית קו תחתון מהודר.

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

הזן CSS mask.

הקוד אולי נראה מוזר אבל ההיגיון עדיין זהה לזה שעשינו עם כל אנימציות הרקע הקודמות. ה mask מורכב משני שיפועים. השיפוע הראשון מוגדר עם צבע אטום המכסה את אזור התוכן (הודות ל- content-box ערך). שיפוע ראשון זה הופך את הטקסט לגלוי ומסתיר את גבול הזיגזג התחתון. content-box האם ה mask-clip ערך שמתנהג אותו דבר כמו background-clip

linear-gradient(#000 0 0) content-box

השיפוע השני יכסה את כל האזור (תודה ל padding-box). לאחד הזה יש רוחב שמוגדר באמצעות ה- --_p משתנה, והוא ימוקם בצד שמאל של האלמנט.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

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

.hover:hover { --_p: 100%; color: var(--c);
}

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

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

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

בואו נשנה את תצורת הרקע על ידי החלפת קו התחתון הזיגזג בקו תחתון גלי במקום זאת:

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

כאילו, למה לא משהו כזה:

הנה אתגר בשבילך: הגבול בהדגמה האחרונה הוא שיפוע באמצעות ה- mask רכוש כדי לחשוף אותו. האם אתה יכול להבין את ההיגיון מאחורי האנימציה? זה אולי נראה מורכב במבט ראשון, אבל זה מאוד דומה להיגיון שבדקנו עבור רוב אפקטי הריחוף האחרים שמסתמכים על שיפועים. פרסם את ההסבר שלך בתגובות!

אפקטי ריחוף בתלת מימד

אתה אולי חושב שזה בלתי אפשרי ליצור אפקט תלת מימדי עם אלמנט בודד (וללא להזדקק לאלמנטים פסאודו!) אבל ל-CSS יש דרך לגרום לזה לקרות.

מה שאתה רואה שם הוא לא אפקט תלת מימד אמיתי, אלא אשליה מושלמת של תלת מימד במרחב הדו מימדי המשלב את ה-CSS background, clip-path, ו transform נכסים.

הדבר הראשון שאנו עושים הוא להגדיר את המשתנים שלנו:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

לאחר מכן אנו יוצרים גבול שקוף עם רוחבים המשתמשים במשתנים לעיל:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

הצד העליון והימני של האלמנט שניהם צריכים להיות שווה ל- --b ערך בעוד שהצד התחתון והשמאלי צריכים להיות שווה לסכום של --b ו --d (שהוא ה --_s מִשְׁתַנֶה).

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

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

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

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

השלב האחרון הוא ליישם את א CSS clip-path כדי לחתוך את הפינות לתחושה של צל ארוך כזה:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

זה הכל! הרגע יצרנו מלבן תלת מימדי בלי שום דבר מלבד שני מעברים ו-a clip-path שנוכל להתאים בקלות באמצעות משתני CSS. עכשיו, כל מה שאנחנו צריכים לעשות זה להנפיש אותו!

שימו לב לקואורדינטות מהאיור הקודם (מסומן באדום). בואו נעדכן את אלה כדי ליצור את האנימציה:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

החוכמה היא להסתיר את החלקים התחתונים והשמאליים של האלמנט כך שכל מה שנותר הוא אלמנט מלבני ללא עומק כלשהו.

עט זה מבודד את clip-path חלק מהאנימציה כדי לראות מה היא עושה:

המגע הסופי הוא להזיז את האלמנט בכיוון ההפוך באמצעות translate - והאשליה מושלמת! הנה האפקט באמצעות ערכי מאפיינים מותאמים אישית שונים עבור עומקים משתנים:

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

שילוב אפקטים!

הדבר המדהים בכל מה שסקרנו הוא שכולם משלימים זה את זה. הנה דוגמה שבה אני מוסיף מה היא text-shadow השפעה מהמאמר השני בסדרה ל- background טכניקת אנימציה מהמאמר הראשון תוך כדי שימוש בטריק התלת-ממד שכיסינו זה עתה:

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

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

החלתי את אותו אפקט על תמונות והתוצאה הייתה די טובה להדמיית תלת מימד עם אלמנט בודד:

רוצה להסתכל מקרוב על איך עובד ההדגמה האחרונה? כתבתי עליו משהו.

גלישה את

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

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

---

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

• Coinsmart. בורסת הביטקוין והקריפטו הטובה באירופה.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה חופשית.
• CryptoHawk. רדאר אלטקוין. ניסיון חינם.
• מקור: https://css-tricks.com/css-hover-effects-background-masks-3d/