دگرگونی طراحی وب با ویژگی های جدید CSS | قسمت دوم

ویژگی های جدید در CSS به طراحی هر چه زیباتر و کارامدتر وب‌ سایت‌های امروزی کمک کرده و دست طراحان را برای خلاقیت بیشتر باز گذاشته است.


در آخرین بخش از قسمت قبلی مقاله در لیداوب به بررسی این موضوع پرداختیم که گریدهای ایجاد شده با واحد fr اغلب دارای اندازه‌های یکسان هستند. البته اگر شما عنصری داشته باشید که عریض‌تر از تمام ستون‌های ایجاد شده با واحد fr باشد، در این صورت باید محاسبات به گونه متفاوتی ایجاد شود و این قضیه را با مثالی به شما نمایش دادیم. حال می‌خواهیم بدانیم چگونه شبکه‌‌ای با عرض‌های متفاوت ایجاد کنیم.

قسمت اول مقاله

ایجاد شبکه ای با عرض های نامساوی در css

برای ایجاد شبکه‌ای با عرض‌های نامساوی، باید واحدهای fr را به صورت مختلف انتخاب کنید. در زیر شبکه‌ای آورده شده است که از نسبت طلایی پیروی می‌کند یعنی ستون دوم ۱/۶۱۸ برابر ستون اول و ستون سوم ۱/۶۱۸ برابر ستون دوم است:

.grid {
  display: grid;
  grid-template-columns: 1fr 1.618fr 2.618fr;
  grid-column-gap: 1em;
}

اگر می‌خواهید شبکه را در نقاط شکست مختلف تغییر دهید، می‌توانید یک شبکه جدید را درون یک مدیا کوئری اعلام کنید:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
}

@media (min-width: 30em) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

آیا ایجاد شبکه با ویژگی CSS Grid ساده‌تر نیست؟ طراحان و برنامه‌ نویسان قبلی آرزوی داشتن چنین امکاناتی را داشتند.

ایجاد گرید بر اساس ارتفاع در css

قبلا ایجاد شبکه بر اساس ارتفاع یک وب سایت غیر ممکن بود چون هیچ راهی وجود نداشت تا ارتفاع viewport مشخص شود. حالا، با وجود واحدهای viewport، CSS Calc و CSS Grid می‌توانیم حتی گریدهایی بر اساس ارتفاع viewport ایجاد کنیم. در شکل زیر، مربع‌های شبکه‌ای بر اساس ارتفاع مرورگر ایجاد شده است:

ویژگی های جدید در CSS

قرار دادن آیتم ها در شبکه 

در گذشته جایگذاری آیتم‌های شبکه یک دردسر بزرگ بود چون مجبور بودید، خصوصیت margin-left را محاسبه کنید. امروزه با وجود خصوصیت CSS Grid می‌توانید آیتم‌های گرید را مستقیما با استفاده از CSS و بدون محاسبات اضافه در جای خود قرار دهید:

.grid-item {
  grid-column: 2; /* Put on the second column */
}

حتی می‌توانید با استفاده از کلمه کلیدی span  به آیتم‌های شبکه بگویید چه تعداد ستون را اشغال کنند:

.grid-item {
  /* Put in the second column, span 2 columns */
  grid-column: 2 / span 2;
}

مطالعه بیشتر در لیداوب:

طراحی با اشکال نامنظم 

ما به ایجاد آرایش‌های مستطیلی عادت کرده‌ایم چون مدل CSS Box هم مستطیل است. علاوه بر مستطیل، ما راه‌هایی هم برای ایجاد اشکال ساده مانند مثلث و دایره پیدا کردیم. امروزه دیگر مجبور نیستیم فقط به همین موارد بسنده کنیم. با استفاده از CSS Shape و clip-path می توانیم بدون تلاش زیاد، اشکال نامنظم ایجاد کنیم. برای مثال، Aysh Anggraini یک آرایش کامیک استریپ را با استفاده از CSS Grid و clip path ایجاد کرده است:

ویژگی های جدید در CSS

CSS Shape و clip path امکانات نامحدودی برای ایجاد اشکال سلیقه‌ای و منحصر به فرد در طراحی‌ را در اختیار شما قرار می‌دهند. متاسفانه کار با CSS Shep و clip path به اندازه CSS Grid بصری نیستند اما با استفاده از ابزارهایی مانند Clippy و Shape Path Editor در فایرفاکس می‌توانیم اشکالی که می‌خواهیم را ایجاد کنیم.

آموزش‌های طراحی سایت در لیداوب:

آموزش پایه لاراول ۵,۵

آموزش CSS

آموزش HTML مقدماتی

مقالات و دوره‌های آموزشی در لیداوب شما را با تمام مباحث طراحی سایت آشنا می‌کند.

برچسب ها