CSS Grid and Custom Shapes، قسمت 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 Grid of Hexagons

این همچنین گاهی اوقات به عنوان شبکه "لانه زنبوری" نامیده می شود.

در حال حاضر تعداد زیادی پست وبلاگ دیگر وجود دارد که نشان می دهد چگونه این کار را انجام دهید. هک، من یکی نوشت اینجا در 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 Grid of Rhombuses

لوزی برای مربعی که 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);
}

چرخش تصاویر در جهت منفی از چرخش آنها با شبکه جلوگیری می کند تا مستقیم بمانند. اکنون، a را اعمال می کنیم 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 Pizza Pie Grid

حدس بزن چی شده؟ ما می‌توانیم با اضافه کردن یک شبکه جذاب دیگر به دست آوریم 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 استفاده می کردیم! و خود نشانه گذاری چیزی نیست جز یک ظرف با تعداد انگشت شماری از عناصر تصویر!

در قسمت دوم، می‌خواهیم شبکه‌های پیچیده‌تری را با اشکال فانتزی و افکت‌های شناور بررسی کنیم.

من قصد دارم نسخه نمایشی گسترش پانل های تصویری را که با هم ساخته ایم را دریافت کنم این مقاله دیگر:

... و آن را به پانل های تصویری زیگ زاگ تبدیل کنید! و این تنها یک نمونه از بسیاری از مواردی است که در مقاله بعدی کشف خواهیم کرد.