در طول امسال کنفرانس Frontend زوریخ راشل اندرو صحبت کرد باز کردن قدرت طرح بندی شبکه CSS. او در پایان صحبت های خود به چیزی در مورد یک ویژگی قدیمی CSS که در ذهن من گیر کرده بود اشاره کرد:

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

– راشل اندرو

مدت کوتاهی پس از شنیدن این سخنرانی، فکر کردم که شما مطمئناً می‌توانید چیزی بیش از یک حلقه ایجاد کنید و شروع کردم به کاوش عمیق‌تر در مورد آنچه که می‌توان با استفاده از شعاع مرزی انجام داد.

تسلط بر Border-Radius

ارزش واحد

بیایید با اصول اولیه شروع کنیم. امیدوارم این شما را خسته نکند. احتمالاً با CSS آشنایی دارید و مرز-radius را نیز می شناسید. اکنون چند سالی است که وجود دارد و بیشتر با یک مقدار مانند زیر استفاده می شود: border-radius: 1em و شاید یکی از مورد بحث ترین/دوست داشتنی ترین ویژگی های CSS3 در سال 2010 بود css3please.com بهترین دوستت بود

هر زمان که فقط از یک مقدار استفاده می کنید، تمام گوشه ها با این مقدار گرد می شوند:

همانطور که در مثال بالا مشاهده می کنید، در کنار مقادیر طول ثابت مانند px، rem یا em شما همچنین می توانید از درصد استفاده کنید. اینها بیشتر برای ایجاد یک دایره با تنظیم مرز-شعاع روی 50٪ استفاده می شوند. مقدار درصد بر اساس است روی عرض و ارتفاع عنصر داده شده بنابراین وقتی از آن استفاده می کنید روی یک مستطیل، دیگر گوشه های متقارن نخواهید داشت. در اینجا یک مثال نشان می دهد که تفاوت بین border-radius: 110px و border-radius: 30% روی یک مستطیل اعمال می شود.

توجه کنید که گوشه ها روی سمت راست متقارن نیستند و این را در نظر داشته باشید. بعداً به این موضوع باز خواهیم گشت.

چهار ارزش متفاوت

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

هشت مقدار که با یک اسلش از هم جدا شده اند (اینجا جالب می شود)

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

اگر مقادیر قبل و بعد از اسلش داده شوند، مقادیر قبل از اسلش شعاع افقی و مقادیر بعد از اسلش شعاع عمودی را تعیین می کنند. اگر اسلش وجود نداشته باشد، مقادیر هر دو شعاع را به یک اندازه تنظیم می کنند.

– W3C

بنابراین، مقادیر قبل از اسلش مسئول فواصل افقی هستند در حالی که مقادیر بعد از اسلش، طول های عمودی را تعیین می کنند. اما به چه معنا است؟ مقادیر درصد را به خاطر بسپارید روی اشکال مستطیلی؟ ما مقادیر مطلق متفاوتی برای فواصل عمودی و افقی و گوشه های گرد نامتقارن داشتیم، و این دقیقاً همان چیزی است که هنگام استفاده از نحو اسلش.

بنابراین وقتی مقایسه می کنید border-radius: 4em 8em به border-radius: 4em / 8em نتایج کاملا متفاوت است.

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

راستش اشکالی که با این به دست می آورید کمی عجیب به نظر می رسند. اما حلقه هایی را که با آنها ایجاد می کنید به خاطر بسپارید border-radius: 50%. شما یک دایره دریافت می کنید زیرا هر دو مقداری که یک طرف را تعریف می کنند تا 100% جمع می شوند (50% + 50% = 100%) و هیچ خط مستقیمی باقی نمانده است که شما را به یاد مربع اصلی می اندازد. اگر منطق یکسانی را به نحو کامل هشت مقدار مرز-شعاع اعمال کنید، می‌توانید شکلی ایجاد کنید که کمی شبیه یک شبکه یا یک سلول آلی باشد:

در پایان چهار بیضی روی هم قرار گرفته اند که شکل نهایی را می سازند. راحت ها!

نترسید… ما یک ژنراتور بصری برای شما ساختیم

مدتی طول کشید تا به این نحو عادت کنم. به نوعی آنقدر شهودی نیست. برای اینکه کارها را کمی برای شما آسان کنیم، ساختیم یک ابزار کوچک، که به شما کمک می کند شکل ارگانیک خود را ایجاد کنید.

از جریان ها عبور نکنید

اکنون که در مجموع 8 مقدار را می دانید، ممکن است کمی غمگین شوید، زیرا ابزار مرزی ما به شما این امکان را نمی دهد که هر مقدار را جداگانه تنظیم کنید… محکم بنشینید، اینجاست 8-نقطه-کامل-کنترل نسخه

اگر به اندازه کافی بزرگ شده اید، ممکن است این را به خاطر بسپارید نقل قول از سال 1984 شکارچیان ارواح فیلم سینما:

از نهرها عبور نکنید. – “چرا؟” – “بد خواهد بود.”

چیزی شبیه به این وجود دارد روی اینجا: اگر از دسته ها عبور کنید روی از یک طرف، شکل رفتار می کند… بیایید بگوییم غیرقابل پیش بینی است. ولی خودت ببینبه هر حال، قرار نیست به معکوس کامل پروتونیک یا چیزی دیگر ختم شود، اما نگویید که من به شما هشدار ندادم.

PS. با تشکر فراوان از سیمورایی. در سال 2010، او برخی را ایجاد کرد دکمه های CSS3 BonBon. با وجود اینکه کمی قدیمی به نظر می رسند، اما این تنها جایی است که من تا به حال با نحو اسلش آشنا شده ام.

این ویژگی جالب را در عمل ببینید

عکس ها توسط gratisography.com

قلم را ببینید شعاع مرزی توسط نیلز (@enbee81) روی CodePen.

این مقاله بود در ابتدا منتشر شد روی متوسط، با اجازه نویسنده بازنشر شد