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

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

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

נתחיל עם קצת סימון

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

זה אמר, בואו נתחיל בזה:

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

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

רשת CSS של משושים

זה מכונה לפעמים גם רשת "חלת דבש".

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

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

.gallery {
  --s: 150px; /* controls the size */
  display: grid;
}

.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

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

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

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

translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))

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

.gallery {
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  display: grid;
}
.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
  transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5), 
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }

אולי זה יהיה קל יותר כשנגיע פונקציות טריגונומטריה אמיתיות ב-CSS!

כל תמונה מתורגמת על ידי --_x ו --_y משתנים המבוססים על נוסחאות אלו. רק התמונה השנייה (nth-child(2)) אינו מוגדר בכל בורר כי הוא זה שבמרכז. זה יכול להיות כל תמונה אם תחליט להשתמש בסדר אחר. הנה הסדר שבו אני משתמש:

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

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

אם תבדוק את הקוד ותשווה אותו לקודם תבחין שפשוט החלפתי את הערכים בפנים clip-path והחלפתי בין --x ו --y. זה הכל!

רשת CSS של מעוינים

מעוין היא מילה כל כך מפוארת לריבוע שמסובב 45 מעלות.

אותו HTML, זוכר? ראשית אנו מתחילים בהגדרת רשת 2×2 של תמונות ב-CSS:

.gallery {
  --s: 150px; /* controls the size */

  display: grid;
  gap: 10px;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  place-items: center;
}
.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  object-fit: cover;
}

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

grid: auto-flow var(--s) / repeat(2,var(--s));

/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);

זה מגדיר שתי עמודות שוות ל- --s משתנה ומגדיר את גובה כל השורות ל --s גם כן. מכיוון שיש לנו ארבע תמונות, נקבל אוטומטית רשת של 2×2.

הנה דרך אחרת שיכולנו לכתוב את זה:

grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));

...אשר ניתן לצמצם עם grid קַצרָנוּת:

grid: repeat(2,var(--s)) / repeat(2,var(--s));

לאחר הגדרת הרשת, אנו מסובבים אותה ואת התמונות עם CSS transforms ואנחנו מקבלים את זה:

שימו לב איך אני מסובב את שניהם על ידי 45deg, אבל בכיוון ההפוך.

.gallery {
  /* etc. */
  transform: rotate(45deg);
}
.gallery > img {
  /* etc. */
  transform: rotate(-45deg);
}

סיבוב התמונות בכיוון השלילי מונע מהן להסתובב עם הרשת כך שהן נשארות ישרות. כעת, אנו מיישמים א clip-path לגזוז מהם צורת מעוין.

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

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

אל תדאג, אני לא אציג עוד גיאומטריה משעממת. כל מה שאתה צריך לדעת הוא שהקשר בין הרדיוס של כל עיגול הוא השורש הריבועי של 2 (sqrt(2)). זה הערך שאנחנו צריכים כדי להגדיל את גודל התמונות שלנו כדי למלא את השטח. אנחנו נשתמש 100%*sqrt(2) = 141% ותיגמר!

.gallery {
  --s: 150px; /* control the size */

  display: grid;
  grid: auto-flow var(--s) / repeat(2,var(--s));
  gap: 10px;
  place-items: center;
  transform: rotate(45deg);
}
.gallery > img {
  width: 141%; /* 100%*sqrt(2) = 141% */
  aspect-ratio: 1;
  object-fit: cover;
  transform: rotate(-45deg);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

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

רשת CSS של צורות משולשות

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

אנו מניחים אותם בתוך רשת 3×2 עם ה-CSS הבא:

.gallery {
  display: grid;
  gap: 10px; 
  grid-template-columns: auto auto auto; /* 3 columns */
  place-items: center;
}
.gallery > img {
  width: 200px; /* controls the size */
  aspect-ratio: 1;
  object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }

הנה מה שאנחנו מקבלים:

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

grid-template-columns: auto 0 auto;

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

CSS פיצה פאי רשת

נחש מה? נוכל להשיג עוד רשת מגניבה על ידי הוספה פשוטה border-radius ו overflow לרשת או לצורות המשולשות שלנו. 🎉

רשת CSS של חלקי פאזל

הפעם אנחנו הולכים לשחק עם ה-CSS mask תכונה כדי לגרום לתמונות להיראות כמו חלקי פאזל.

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

הגדרת הרשת אמורה להיות קלה כעת, אז בואו נתמקד במקום זאת mask חֵלֶק.

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

--g: 6px; /* controls the gap */
--r: 42px;  /* control the circular shapes */

background: 
  radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
  radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
  top/100% calc(100% - var(--r)) no-repeat;

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

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

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

אנחנו צריכים ליצור הצפה על ידי הגדלת הגובה/רוחב של התמונות. מהאיור שלעיל, עלינו להגדיל את גובה התמונה הראשונה והרביעית בעוד שאנו מגדילים את הרוחב של התמונה השנייה והשלישית. בטח כבר ניחשתם שאנחנו צריכים להגדיל אותם באמצעות ה --r משתנה

.gallery > img:is(:nth-child(1),:nth-child(4)) {
  width: 100%;
  height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
  height: 100%;
  width: calc(100% + var(--r));
}

אנחנו מתקרבים!

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

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

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

גלישה את

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

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

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

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