רשת CSS וצורות מותאמות אישית, חלק 2

בסדר, אז ה בפעם האחרונה שעשינו צ'ק אין, השתמשנו ב-CSS Grid ושילבנו אותם עם CSS clip-path ו mask טכניקות ליצירת רשתות עם צורות מפוארות.

הנה רק אחד מהרשתות המדהימות שיצרנו יחד:

מוכנים לסיבוב השני? אנחנו עדיין עובדים עם CSS Grid, clip-path, ו mask, אבל בסוף המאמר הזה, נסיים עם דרכים שונות לסדר תמונות על הרשת, כולל כמה אפקטים של ריחוף ראד שמספקים חוויה אותנטית ואינטראקטיבית לצפייה בתמונות.

ונחש מה? אנחנו משתמשים ב- אותו סימון שבו השתמשנו בפעם הקודמת. הנה זה שוב:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

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

רשת תמונה מקוננת

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

בואו ננסה לקנן תמונה במרכז הרשת:

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

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gap between images */

  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
}

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

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

.gallery > img {
   mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }

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

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

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

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

.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

השמיים inset נכס מאפשר לנו להציב את התמונה במרכז באמצעות הצהרה אחת. אנחנו יודעים את גודל התמונה (מוגדר עם המשתנה --s), ואנחנו יודעים שגודל המיכל שווה ל-100%. אנחנו עושים קצת מתמטיקה, והמרחק מכל קצה צריך להיות שווה ל (100% - var(--s))/2.

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

שוב הקוד המלא:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px;  /* controls the gap between images */
  
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
  position: relative;
}

.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}

.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a:  0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

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

זה נכון, ונקבל את הדברים הבאים:

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

בואו ננסה הפעם צורה אחרת:

הפעם, הפכנו את התמונה המקוננת בעיגול במקום ריבוע. זו משימה קלה עם border-radius אבל אנחנו צריכים להשתמש ב-a חיתוך עגול עבור התמונות האחרות. עם זאת, הפעם נסתמך על א radial-gradient() במקום conic-gradient() כדי לקבל את המראה המעוגל והיפה הזה.

.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0%   - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0%   - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0%   - var(--g)/2) calc(0%   - var(--g)/2); }

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

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

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

אם תבדוק את הקוד של הגרדיאנט, תוכל לראות שאני מוסיף 1em:

mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));

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

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

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gaps between images */

  font-size: 0; /* initially we have 1em = 0 */
  transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
  width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
  font-size: calc(var(--s) / 5);
}

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

גיליתי את font-size טריק מ @SelenIT2 תוך כדי ניסיון לפתור אתגר בטוויטר.

צורה אחרת? בוא נלך!

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

רשת תמונה מעגלית

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

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

אנחנו הולכים להשתמש clip-path ו שלה circle() פונקציה ל - ניחשתם נכון! - חתוך עיגול מהתמונות.

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

עבור התמונות האחרות, נוכל לעדכן את מרכז המעגל (70% 70%) כדי לקבל את הקוד הבא:

.gallery > img:hover {
  --_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
  clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
  clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
  clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
  clip-path: circle(var(--_c, 55% at 30% 30%));
}

שימו לב כיצד אנו מגדירים את clip-path ערכים כמפלה בפנים var(). דרך זו מאפשרת לנו לעדכן ביתר קלות את הערך ברחף על ידי הגדרת הערך של ה- --_c מִשְׁתַנֶה. כשמשתמש circle(), מיקום ברירת המחדל של נקודת המרכז הוא 50% 50%, אז אנחנו יכולים להשמיט את זה לקוד תמציתי יותר. לכן אתה רואה שאנחנו רק קובעים 50% במקום 50% at 50% 50%.

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

.gallery {
  --s: 200px; /* controls the image size */
  --g: 8px;   /* controls the gap between images */

  display: grid;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  gap: var(--g);
}

.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  cursor: pointer;
  z-index: 0;
  transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
  --_c: 50%; /* change the center point on hover */
  width: calc(200% + var(--g));
  z-index: 1;
  transition: .4s, z-index 0s;
}

.gallery > img:nth-child(1){
  clip-path: circle(var(--_c, 55% at 70% 70%));
  place-self: start;
}
.gallery > img:nth-child(2){
  clip-path: circle(var(--_c, 55% at 30% 70%));
  place-self: start end;
}
.gallery > img:nth-child(3){
  clip-path: circle(var(--_c, 55% at 70% 30%));
  place-self: end start;
}
.gallery > img:nth-child(4){
  clip-path: circle(var(--_c, 55% at 30% 30%));
  place-self: end;
}

מה קורה עם place-self תכונה? למה אנחנו צריכים את זה ולמה לכל תמונה יש ערך ספציפי?

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

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

1. התמונה הראשונה שעולה על הקצה הימני התחתון (התנהגות ברירת המחדל),
2. התמונה השנייה שתעלה על הקצה השמאלי התחתון,
3. התמונה השלישית להציף את הקצה הימני העליון, ו
4. התמונה הרביעית שתעלה על הקצה השמאלי העליון.

כדי להשיג זאת, עלינו למקם כל תמונה בצורה נכונה באמצעות ה place-self נכס.

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

הרחבת לוחות תמונה

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

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

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

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

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

אנחנו צריכים רק שורה אחת ומספר העמודות צריך להתאים בהתאם למספר התמונות. זה אומר שאנחנו כבר לא צריכים משתנים עבור מספר השורות (--n) ועמודות (--m ) אבל אנחנו צריכים להשתמש grid-auto-flow: column, המאפשר לרשת ליצור עמודות אוטומטית כאשר אנו מוסיפים תמונות חדשות. נשקול גובה קבוע עבור המכולה שלנו; כברירת מחדל, הוא יהיה ברוחב מלא.

בואו נקצר את התמונות לצורה מלוכסנת:

שוב, כל תמונה כלולה בתא הרשת שלה, כך שיש יותר רווח בין התמונות ממה שהיינו רוצים:

אנחנו צריכים להגדיל את רוחב התמונות כדי ליצור חפיפה. אנחנו מחליפים min-width: 100% עם min-width: calc(100% + var(--s)), שם --s הוא משתנה חדש השולט בצורה.

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

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

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

התוצאה הסופית היא פאנל מתרחב יפה של תמונות מלוכסנות!

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

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

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

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

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

.gallery > img {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
    conic-gradient(from   45deg at left,  #0000, #000 1deg 89deg, #0000 90deg) 
      0%   calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
  --_p: var(--s);
}
.gallery > img:first-child {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
  mask: 
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}

שימו לב לשימוש ב- --_p משתנה, שיחזור אליו 0% אבל יהיה שווה ל --_s לתמונות המוזרות.

הנה הדגמה שממחישה את הנושא. העבר את העכבר כדי לראות כיצד ההיסט - מוגדר על ידי --_p - מתקן את היישור.

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

ולמה לא צדדים מעוגלים? בוא נעשה את זה!

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

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

המסכה הראשונה:

mask: 
  linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
  radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;

השני:

mask:
  radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000) 
  calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))

המאמץ היחיד שעשיתי כאן הוא לעדכן את המסכה השנייה כך שתכלול את משתנה הפער (--g) כדי ליצור את הרווח הזה בין התמונות.

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

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

.gallery > img:first-child {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}

עבור התמונה האחרונה, זה תלוי במספר האלמנטים, אז זה משנה אם האלמנט הזה כן :nth-child(odd) or :nth-child(even).

.gallery > img:last-child:nth-child(even) {
  mask: 
    linear-gradient(to right,#0000 var(--s),#000 0),
    radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}

.gallery > img:last-child:nth-child(odd) {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}

זה הכל! שלוש פריסות שונות אבל אותם טריקים של CSS בכל פעם:

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

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

והנה זה עם הטמעת Flexbox

גלישה את

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

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

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

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