شبكة CSS والأشكال المخصصة ، الجزء الأول

في مقال سابق ، نظرت في قدرة 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 transformق ونحصل على هذا:

لاحظ كيف أقوم بتدويرهما على حد سواء 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 في كل مرة! والترميز بحد ذاته ليس أكثر من حاوية بها حفنة من عناصر الصورة!

في الجزء الثاني ، سنستكشف شبكات أكثر تعقيدًا مع أشكال أكثر فخامة وتأثيرات تحوم.

أخطط لأخذ العرض التوضيحي لتوسيع لوحات الصور التي صنعناها معًا هذه المقالة الأخرى:

... وتحويلها إلى لوحات صور متعرجة! وهذا مثال واحد فقط من بين أمثلة كثيرة سنكتشفها في المقالة التالية.