מטעני אלמנט בודד: עוברים תלת מימד!

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

מטעין הקוביות המפוצלות

הנה מטעין תלת מימד שבו קובייה מפוצלת לשני חלקים, אך היא עשויה רק ​​עם אלמנט בודד בלבד:

כל חצי של הקובייה עשוי באמצעות פסאודו-אלמנט:

מגניב נכון?! אנחנו יכולים להשתמש בשיפוע חרוטי עם CSS clip-path על של האלמנט ::before ו ::after פסאודו כדי לדמות את שלושת הפנים הגלויות של קוביית תלת מימד. מרווח שלילי הוא מה שמושך את שני הפסאודו יחד כדי לחפוף ולדמות קובייה מלאה. שאר העבודה שלנו היא בעיקר הנפשה של שני החצאים האלה כדי לקבל מעמיסים מסודרים למראה!

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

יש לנו את המשתנים שלנו ומשוואה, אז בואו נפעיל אותם. ראשית, נבסס את המשתנים שלנו ונקבע את הגודל עבור הראשי .loader אֵלֵמֶנט:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

שום דבר מטורף מדי עד כה. יש לנו 150px ריבוע שמוגדר כמיכל גמיש. כעת אנו מבססים את הפסוודוס שלנו:

.loader::before,
.loader::after { content: ""; flex: 1;
}

אלה שני חצאים ב .loader מְכוֹלָה. אנחנו צריכים לצבוע אותם פנימה, אז זה המקום שלנו שיפוע חרוטי נכנס לפעולה:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

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

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

בואו נוודא ששני החצאים חופפים ל-a מרווח שלילי:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

עכשיו בואו נגרום להם לזוז!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

הנה שוב ההדגמה הסופית:

טוען קוביות ההתקדמות

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

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

הצעד הראשון הוא להוסיף קצת שקיפות לצד ימין באמצעות opacity:

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

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

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

בואו נחייה את רוחב הצד השמאלי של המעמיס:

אופס, האנימציה קצת מוזרה בהתחלה! שים לב איך זה מתחיל מחוץ לקובייה? זה בגלל שאנחנו מתחילים את האנימציה ב- 0% רוֹחַב. אבל בשל ה clip-path ובמרווח שלילי שאנו משתמשים בו, מה שעלינו לעשות במקום זה הוא להתחיל משלנו --_d משתנה, שבו השתמשנו כדי להגדיר את clip-path נקודות והמרווח השלילי:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

זה קצת יותר טוב:

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

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

אנחנו יכולים להוסיף גרדיאנט לאלמנט הראשי ולחתוך אותו כמו שעשינו עם הפסאודו:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

הנה הקוד המלא לאחר שהכל יתחבר:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

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

עוד תלת מימד

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

הדגמה זו והדגמות הבאות אינן נתמכות בספארי בזמן כתיבת שורות אלה.

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

אנו משתמשים תחילה ב- a conic-gradient כדי ליצור את תבנית הקובייה החוזרת. החזרה על התבנית נשלטת על ידי שלושה משתנים:

• --size: נכון לשמה, זה שולט בגודל של כל קובייה.
• --m: זה מייצג את מספר העמודות.
• --n: זהו מספר השורות.
• --gap: זה הפער או המרחק בין הקוביות

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

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

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

הקוד עשוי להיראות מעט מורכב, אבל הודות למשתני CSS כל מה שאנחנו צריכים לעשות הוא לעדכן כמה ערכים כדי לשלוט במטריצת הקוביות שלנו. צריך רשת 10⨉10? עדכן את --m ו --n משתנים ל 10. צריך מרווח גדול יותר בין הקוביות? עדכן את --gap ערך. ערכי הצבע משמשים רק פעם אחת, אז עדכנו את אלה עבור פלטת צבעים חדשה!

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

מטעין זה מגדיר ארבע קוביות בשורה אחת. זה אומר שלנו --n הערך הוא 4 ו --m שווה ל 1 . במילים אחרות, אנחנו כבר לא צריכים את אלה!

במקום זאת, אנחנו יכולים לעבוד עם --size ו --gap משתנים במיכל רשת:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

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

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

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

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

.loader { /* same as before */ justify-content: end;
}

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

כעת כל שעלינו לעשות הוא להזיז את הפסאודו-אלמנט ימינה על ידי הוספת האנימציה שלנו:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

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

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

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

הנה הדבר המלא:

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

אנחנו הולכים להסתמך על רקע מונפש עם background-blend-mode לזה:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

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

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

אם אתה לא מכיר את הערכים שבהם אני משתמש background-position ותחביר הרקע, אני ממליץ בחום אחד מהמאמרים הקודמים שלי ואחד מ תשובותי Stack Overflow. תמצא שם הסבר מפורט מאוד.

האם נוכל לעדכן את מספר הקוביות כדי להפוך אותו למשתנים?

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

וריאציות בשפע!

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

סיימנו

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

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

---

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

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