اشکال بیضی شکل انعطاف پذیر

صورت مسئله

به احتمال زیاد می دانید که به وسیله کد زیر می توان یک عنصر را به دایره تبدیل کرد.

 

background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 200/2 */

 

و شاید متوجه شده باشید که اگر شروع به افزایش مقدار border-radius کنید, تغییری به وجود نخواهد آمد و همچنان عنصر به صورت دایره شکل باقی می ماند. دلیل این موضوع این است که:

انحنای گوشه های یک عنصر نباید روی هم قرار بگیرند. زمانی که مجموع انحنای دو گوشه مجاور بیشتر از اندازه عنصر شود, مرورگر باید به نسبت از مقدار انحنای تمام گوشه ها کم کند تا هیچ کدام از آنها روی هر قرار نگیرند.

به هر حال, همیشه نمی توانیم عرض و ارتفاع برابر برای یک عنصر داشته باشیم چون اندازه یک عنصر غالبا وابسته به محتوای آن خواهد بود. حتی اگر مطمئن باشیم که محتوا ثابت است باز هم این امکان وجود دارد که زمانی تغییر کند و شاید تغییر فونت و دیگر موارد باعث شوند تا عرض و ارتفاع ثابت و برابر هم نداشته باشیم. معمولا در این شرایط می خواهیم تا شکل نهایی بیضی شود. در کد بالا اگر ارتفاع کمتر از عرض باشد نتیجه بصورت زیر خواهد بود:

 

ولی آیا می توانیم در CSS اشکال این چنینی داشته باشیم, که همچنین نسبت به محتوا انعطاف پذیر باشند؟

پیشنیازها

1. border-radius

 

راه حل

یکی از مواردی که کمتر شناخته شده است, این است که می توانیم شعاع افقی و عمودی را بصورت جداگانه برای انحنای گوشه یک عنصر مشخص کنیم. برای این کار کافی است تا از / استفاده کنیم. این موضوع به ما اجازه می دهد تا انحناهای بیضی شکل در گوشه های یک عنصر بوجود بیاوریم. (شکل زیر را مشاهده کنید)

 

 

پس, اگر عنصری با اندازه 200 پیکسل در 150 پیکسل داشته باشیم, می توانیم با تعیین شعاع هایی به اندازه نصف عرض و ارتفاع عنصر آن را به یک بیضی تبدیل کنیم:

 

border-radius: 100px / 75px;

 

نتیجه بصورت زیر خواهد بود:

 

ولی باز هم مشکل بیان شده در اول مطلب اینجا هم وجود دارد و اگر محتوا تغییر کند, اندازه عنصر تغییر خواهد کرد و نتیجه یکسان نخواهد ماند.

حقیقت دیگری که کمتر مورد توجه قرار می گیرد این است که از درصد هم برای مقدار دهی به ویژگی border-radius می توان استفاده کرد. و برتری درصد این است که نسبت به عرض و ارتفاع های متفاوت رفتار یکسانی دارد. پس می توانیم مثال بالا را اینگونه بنویسیم:

 

border-radius: 50% / 50%;

 

و چون دو طرف اسلش یکسان هستند می توانیم بصورت زیر خلاصه نویسی کنیم:

 

border-radius: 50%;

 

در نتیجه بیضی شکلی ساختیم که وابسته به عرض و ارتفاع نمی باشد, یا به عبارت دیگر انعطاف پذیر است.

 

See the Pen Flexible ellipse by Mojtaba Seyedi (@seyedi) on CodePen.

 

حال وقت آن رسیده است تا با نحوه ساخت اشکال دیگر هم آشنا شویم:

 

نیم بیضی

قبل از بررسی این موضوع بهتر است بدانیم که می توانیم برای هر گوشه یک عنصر بصورت مجزا مقدار تعیین کنیم و این کار توسط ویژگی های زیر صورت می گیرد:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

و حتی می توانیم از طریق خود ویژگی border-radius تعیین این مقادیر را بصورت خلاصه داشته باشیم.

حال با توجه به این دانش به بررسی نحوه ساخت یک نیم بیضی می پردازیم:

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

هیچ خط راستی در قسمت بالایی شکل دیده نمی شود, پس باید مجموع انحنای گوشه های بالا برابر با عرض عنصر شوند (%100).

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

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

 

border-radius: .... / 100% 100% 0 0;

 

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

جمع بندی نکات بالا تکه کد زیر خواهد بود که منجر به ساخت یک نیم بیضی عمودی می شود:

 

border-radius: 50% / 100% 100% 0 0;

 

به همین صورت می توانیم نیم بیضی افقی بسازیم:

 

border-radius: 100% 0 0 100% / 50%;

 

 

به عنوان تمرین سعی کنید نیم بیضی دیگری بسازید که این بار به سمت پایین یا سمت راست است. بعد از تمرین دموی زیر را بررسی کنید:

 

See the Pen Flexible half ellipse by Mojtaba Seyedi (@seyedi) on CodePen.

 

نکته مهم اینکه اگر عرض و ارتفاع نصف هم باشند (بنا به جهت شکل متفاوت خواهد بود که کدام باید نصف کدام باشند؟) به شکل نیم دایره خواهیم رسید.

 

چارك بیضی

یک چهارم یا یک چارک بیضی بصورت زیر خواهد بود:

 

با توجه به نکاتی که در ساخت نیم بیضی فرا گرفتیم, حال بسادگی می توان به این نتیجه رسید که برای ساخت چنین شکلی باید یکی از گوشه ها شعاع افقی و عمودی %100 داشته باشد و بقیه گوشه ها بدون انحنا باشند. پس کافی است به صورت زیر عمل کنیم:

 

border-radius: 100% 0 0 0;

 

دموی زیر را بررسی کنید:

 

See the Pen Flexible quarter ellipse by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

تخم مرغ

دموی زیر گویای مطلب خواهد بود:

 

See the Pen Egg shape by Mojtaba Seyedi (@seyedi) on CodePen.

 

در مطالب بعدی با نحوه ساخت کدو خیلی تمبل آشنا خواهیم شد :)

حتما برای ایده های بهتر و شیرین تر به صفحه زیر سر بزنید تا قدرت CSS و کاربردهای آن را بهتر درک کنید:

• BonBon

منبع

• CSS Secrets By Lea Verou