CSS Grid and Custom Shapes، قسمت 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));
}

La 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);
}

La 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(). این روش به ما این امکان را می دهد که با تنظیم مقدار the به راحتی مقدار را در حالت شناور به روز کنیم --_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 یکسانی را به اشتراک می‌گذارند، که چیزی جز فهرستی از تصاویر نیست.

قبل از پایان، یک مثال آخر را برای شما باقی می گذارم. این یک "در مقابل" بین دو شخصیت انیمه با یک افکت شناور جالب است.

تو چطور؟ آیا می توانید بر اساس آموخته های خود چیزی بسازید؟ لازم نیست پیچیده باشد - چیزی جالب یا خنده دار را تصور کنید که من با آن مسابقه انیمه انجام دادم. می تواند تمرین خوبی برای شما باشد و ممکن است در قسمت نظرات مجموعه ای عالی را به پایان برسانیم.