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

حسنًا ، إذن آخر مرة سجلنا فيها الوصول، كنا نستخدم 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 لكننا نحتاج إلى استخدام ملف قطع دائري للصور الأخرى. هذه المرة ، على الرغم من ذلك ، سنعتمد على 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); }

تستخدم جميع الصور نفس التكوين المستخدم في المثال السابق ، لكننا نقوم بتحديث النقطة المركزية في كل مرة.

يوضح الشكل أعلاه النقطة المركزية لكل دائرة. ومع ذلك ، في الكود الفعلي ، ستلاحظ أنني أحسب الفجوة أيضًا للتأكد من أن جميع النقاط في نفس الموضع (مركز الشبكة) للحصول على دائرة مستمرة إذا قمنا بدمجها.

الآن بعد أن أصبح لدينا تخطيطنا ، دعنا نتحدث عن تأثير التمرير. في حالة عدم ملاحظتك ، يزيد تأثير التمرير الرائع من حجم الصورة المتداخلة ويضبط كل شيء آخر وفقًا لذلك. تعد زيادة الحجم مهمة سهلة نسبيًا ، لكن تحديث التدرج اللوني أكثر تعقيدًا لأنه ، افتراضيًا ، لا يمكن تحريك التدرجات. للتغلب على هذا ، سأستخدم ملف 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 - يتم تحديد المحاذاة.

لاحظ أيضًا كيف نستخدم قناعًا مختلفًا للصورة الأولى والأخيرة كما فعلنا في المثال السابق. نحتاج فقط إلى zig-zag على الجانب الأيمن من الصورة الأولى والجانب الأيسر من الصورة الأخيرة.

ولماذا لا جوانب مستديرة؟ لنفعلها!

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

إذا كنت تتذكر ما فعلناه من أجل zig-zag ، فقد استخدمنا نفس القناع لجميع الصور ولكن بعد ذلك اضطررنا إلى إضافة إزاحة إلى الصور الفردية لإنشاء تداخل مثالي. في هذه الحالة ، نحتاج إلى قناع مختلف للصور ذات الأرقام الفردية.

القناع الأول:

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 ، والتي ليست سوى قائمة بالصور.

قبل أن أنتهي ، سأترككم مع مثال أخير. إنه "مقابل" بين شخصيتين من الرسوم المتحركة مع تأثير تحوم رائع.

وماذا عنك؟ هل يمكنك إنشاء شيء بناءً على ما تعلمته؟ ليس من الضروري أن يكون الأمر معقدًا - تخيل شيئًا رائعًا أو مضحكًا كما فعلت مع مباراة الأنيمي تلك. يمكن أن يكون تمرينًا جيدًا لك ، وقد ننتهي بمجموعة ممتازة في قسم التعليقات.