چالش‌های این ماه CodePen درباره ویژگی‌های جدید CSS هست که امسال معرفی شدن. از اونجایی که همیشه سعی می‌کنم بروز بمونم و چیزهای جدید یاد بگیرم، تصمیم گرفتم از این فرصت استفاده کنم و با شرکت توی این چالش‌ها ویژگی‌های جدید CSS رو یاد بگیرم.

هفته اول چالش روی دو ویژگی clip-path: shape() و corner-shape تمرکز داشت و شرکت‌ کننده‌‌ها باید یک Pen با استفاده از این دو ویژگی‌ می‌ساختند. هنوز پشتیبانی مرورگرها از این ویژگی‌ها کامل نیست. clip-path: shape() از نسخه ۱۳۵ به بعد در Chrome/Chromium و از نسخه ۱۸.۴ در Safari کار می‌کنه. corner-shape هم از نسخه ۱۳۹ به بعد در Chrome/Chromium پشتیبانی میشه.

corner-shape

برای یاد گرفتن ویژگی corner-shape می‌تونید با مقاله Understanding CSS corner-shape and the Power of the Superellipse شروع کنید. ویژگی corner-shape در واقع به عنوان مکمل border-radius عمل می‌کنه، border-radius اندازه منحنی (curve) گوشه‌ها را مشخص می‌کنه و corner-shape تعیین می‌کنه اون منحنی دقیقا به چه شکلی نمایش داده بشه.

با استفاده از یکسری کلمه‌ی کلیدی در ویژگی corner-shape می‌تونید شکل‌های متفاوتی به گوشه‌های یک عنصر (element) بدید. مثلاً کلمه‌ی کلیدی round که حالت پیش‌فرضه باعث میشه گوشه‌ها حالت گرد یا دایره‌ای بگیرند. یا کلمه کلیدی bevel که با یه خط صاف، گوشه‌ها رو به هم وصل می‌کنه و حالتی شکسته‌تر بهشون میده.

در تصویر زیر مقادیر مختلف این ویژگی رو می‌بینید.

کاربردهای corner-shape

ویژگی corner-shape واقعاً می‌تونه کاربردی باشه. مثلاً باهاش می‌تونید breadcrumbs یا تگ‌های قیمت (مثل اونایی که توی تصاویر زیر می‌بینید) رو بسازید. اگه می‌خواید مثال‌های بیشتری ببینید، حتماً یه نگاهی به مقاله‌ی What Can We Actually Do With corner-shape بندازید.

برای چالش CodePen، راستش ایده‌ی خاصی برای استفاده از این ویژگی به ذهنم نرسید و نتونستم چیزی بسازم. برای همین تصمیم گرفتم برم سراغ ویژگی بعدی یعنی clip-path: shape().

()clip-path: shape

برای یادگیری ویژگی clip-path: shape() می‌تونید با مقاله ()Better CSS Shapes Using shape شروع کنید. این ویژگی نسبت به مورد قبلی یه کم پیچیده‌تره و برای درک کاملش باید زمان بیشتری بذارید.در ادامه سعی می‌کنم خیلی خلاصه توضیح بدم که این ویژگی دقیقاً چیکار می‌کنه و چه کاربردی داره.

همون‌طور که احتمالاً می‌دونید، با ویژگی clip-path می‌تونید بخشی از یه عنصر HTML رو برش بدید. در واقع این ویژگی یه ناحیه روی عنصر تعریف می‌کنه که فقط محتویات داخل اون ناحیه دیده می‌شن و هر چیزی بیرونش باشه، مخفی یا به‌اصطلاح «برش» داده میشه.

برای مشخص کردن ناحیه‌ی برش در ویژگی clip-path، می‌تونید از توابعی مثل polygon()، circle()، path() و تابع جدید shape() استفاده کنید. تابع path() یه مسیر SVG رو به‌صورت رشته (string) می‌گیره و قبل از معرفی shape()، معمولاً ازش برای ساخت شکل‌های پیچیده‌تر استفاده می‌کردیم.

تابع shape() از مجموعه‌ای از دستورات استفاده می‌کنه که تقریباً معادل همون چیزایی هستن که path() استفاده می‌کنه، اما با این تفاوت که این امکان رو می‌ده تا از ویژگی‌های مختلف CSS مثل var()، calc()، واحدهای مختلف و… هم استفاده کنید.

کاربردهای تابع ()shape

با این تابع می‌تونید شکل‌های پیچیده‌ای بسازید که قبلاً فقط با path() قابل ساختن بودن. یکی از قابلیت‌های جالب shape() اجرای شعاع معکوس (inverted radius) هست. توی تصویر زیر می‌تونید یه نمونه ازش ببینید؛ منظورم همون فرو رفتگی روی تصویر و قسمتیه که یه سری عدد داخلش نوشته شده.

من هم برای چالش CodePen تصمیم گرفتم از inverted radius استفاده کنم. بعد از یه جستجوی طولانی توی وبسایت Dribbble، تونستم یه طرح مناسب پیدا کنم و با تغییر محتوا و تصاویر، نسخه‌ی خودم (دمو زیر) رو آماده کردم.

شرکت در چالش این هفته CodePen مجبورم کرد چیزهای جدیدی یاد بگیرم. سعی کردم چیزهایی که یاد گرفتم رو بطور خلاصه توضیح بدم و امیدوارم شما هم با خوندن این پست، چیزهای جدیدی یاد گرفته باشید.