مشخص کردن border-radius در CSS
واقعاً کار خیلی راحتیه
پس بریم با هم انجامش بدیم
کاری که لازمه انجام بدیم اینه که
ویژگی border-radius رو روی یه المنت مشخص کنیم
مثلاً بیایم بریم سراغ تصاویر
و به همه‌شون border-radius بدیم
پس اینجا میام و همه‌ی تصاویر رو انتخاب می‌کنم
و بعد
border-radius
اینجا باید حتماً یه مقداری مشخص کنیم
و می‌تونیم با مقادیر مختلف امتحان کنیم
که یه حسی پیدا کنید
که هر اندازه‌ی border-radius
چند پیکسل رو تغییر میده
مثلاً اگه بگیم دو پیکسل
تقریباً هیچ تغییری دیده نمی‌شه
می‌بینید که اینجا هنوز کاملاً حالت مربعی داره
حالا اگه بگیم ۵۰ پیکسل
اون موقع خیلی از گوشه‌ها
از بین می‌رن درسته؟
خب این شد ۵۰ پیکسل
ولی حالا بیایم یه مقدار ملایم‌تر مثل ۱۲ پیکسل بزنیم
اینطوری ظاهرش خیلی بهتر می‌شه
چون فونتی که داریم استفاده می‌کنیم خیلی جعبه‌ای و مربعی هست
یعنی خیلی زاویه‌داره
پس شاید حتی نیاز نباشه
تو این طراحی اصلاً border-radius بذاریم
ولی خب من هنوزم می‌خوام بهتون نشون بدم
چون این پروژه بیشتر هدفش اینه
که چیزها رو بهتون نشون بده
پس این تصویرها الان روی ۱۲ پیکسل تنظیم شدن
این یکی اون یکی و بقیه‌شون
حالا که اینجاییم
بیایم به کل این بخش هم
یه border-radius بدیم
اینجا روی تصویر داریم ۱۲ پیکسل
برای اینکه قشنگ‌تر بشه
بهتره به این بخش هم
دقیقاً همون مقدار border-radius بدیم
یادتون باشه اون مقدار ۱۲ پیکسل بود
خب
Border-radius
اگه مثلاً یه مقدار دیگه بزنیم مثل ۲۰ پیکسل
اون وقت یکم نامتناسب می‌شه
البته با ۲۰ پیکسل هم خیلی بد نیست
ولی مثلاً اگه بگیم ۳۰
الان ظاهرش عجیب می‌شه
چون این گوشه‌ها خیلی بیشتر گرد شدن
به همین خاطر ما مقدار رو همون ۱۲ پیکسل می‌ذاریم
می‌بینید که الان ظاهر کار کاملاً منظم و هماهنگ شده
حالا همین کار رو اینجا هم انجام بدیم
چون پایین‌تر هم کارت‌ها (cards) رو داریم
خب این می‌شه همون جعبه‌ی صندلی
احتمالاً همون صندلیه در واقع
پس اینجا هم border-radius رو روی ۱۲ پیکسل می‌ذاریم
و پایین می‌بینید که border-radius اعمال شده
ولی الان اینجا ظاهرش یکم عجیب شده
چون هم روی خود کارت radius داریم
و هم همینطور
روی دو گوشه‌ی پایینی تصویر درسته؟
ما این radius رو بالا می‌خوایم ولی پایین نه
اینجاست که می‌تونیم گوشه‌ها رو به صورت جداگانه کنترل کنیم
با استفاده از CSS
پس بیایم radius رو از این گوشه
و این یکی گوشه حذف کنیم
خب پس اول المنت صندلی رو انتخاب می‌کنیم و بعد تصویر داخلش رو
که داخل همون قرار داره
اینجا از انتخاب‌گر فرزند (child selector) استفاده می‌کنیم
یعنی دوباره المنت صندلی رو انتخاب می‌کنیم که کل این بخشه
و بعد داخلش تصویر رو که همین المنته
یادتون باشه خود تصویر
الان border-radius روی ۱۲ داره
و حالا می‌تونیم یکی از گوشه‌ها رو غیرفعال کنیم
پس میایم سراغ radius پایینی سمت چپ
و مقدارشو صفر می‌ذاریم و می‌بینید حذف شد
در واقع دکمه‌ها رو هم به همین شکل استایل می‌دیم
مثل اون دکمه‌های خلاقانه‌ای
که توی جلسه‌ی قبلی بهتون نشون دادم
جایی که یه گوشه کاملاً مربعی می‌مونه
و سه تای دیگه گرد می‌شن
ولی خب اینجا همچین چیزی نمی‌خوایم
می‌خوایم اون یکی گوشه‌ی پایینی هم
صفر بشه
پس اینطوری درستش می‌کنیم
الان دیگه ظاهرش قشنگ و گرد شده
حالا فقط لازمه این دکمه‌ها رو هم درست کنیم
یعنی این یکی و اون یکی
و کاری که می‌خوایم باهاشون بکنیم
اینه که کلاً کاملاً گرد بشن
یعنی در واقع مثل همین نمونه‌ای که اینجاست
خب حالا کجاست؟
اینجاست
خب border-radius
اینجا نمی‌خوایم این حالت نصفه باشه
که البته اونم خیلی بد به نظر نمی‌رسه
ولی می‌خوام بهتون نشون بدم
چطور می‌شه واقعاً دکمه‌ها رو کاملاً گرد کرد
اینجا دو روش داریم
ولی یکی از اون‌ها فقط وقتی جواب می‌ده که المنت مربع باشه
خب اگر المنت ما یک مربع باشد
برای دایره‌ای کردن آن کافی است به آن یک border-radius برابر با ۵۰٪ بدهیم
مثل این
اما چون این المنت مربع نیست
در نتیجه به یک شکل بیضی تبدیل می‌شود
و خب این چیزی نیست که ما می‌خواهیم
پس در چنین شرایطی
کاری که باید انجام دهیم این است که مقدار خیلی بزرگی را
برای border-radius مشخص کنیم
تا زمانی که مقدار آن بزرگ‌تر از ارتفاع المنت باشد
هیچ مشکلی وجود ندارد
مثلاً می‌توانیم مقدار ۱۰۰ پیکسل بدهیم
و این نتیجه‌ای است که می‌گیریم
اما حتی می‌توانستیم مثلاً ۱۰۰۰ پیکسل بدهیم
و هیچ تفاوتی ایجاد نمی‌شد
فقط نباید مقدار کمتر از ارتفاع باشد
اگر مثل این باشد درست کار نمی‌کند
اما اگر این‌طور باشد شاید درست شود
ولی برای اطمینان من ترجیح می‌دهم مقدار خیلی بزرگی بدهم
پس این مشکل در این بخش
و همین‌طور در بخش پایین‌تر
که از همان کلاس دکمه استفاده کرده‌ایم برطرف شد
خیلی خب
حالا این طراحی کوچک و زیبا
به‌نظرم واقعاً عالی به نظر می‌رسد
فقط یک مورد دیگر باقی مانده که باید اصلاح کنیم
و آن میزان فاصله (spacing) روی صفحه است
در حال حاضر فضای خالی کافی وجود ندارد
و همین باعث می‌شود
صفحه فاقد سلسله‌مراتب بصری (visual hierarchy) مناسب باشد
و این دقیقاً همان چیزی است که
در دو ویدئوی بعدی یاد خواهیم گرفت
تا بعد برگردیم
و این بخش را هم در طراحی خود اصلاح کنیم