صورت پیشامد جدید

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

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

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

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

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

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

پیش نیازها

راه حل

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

پس, در صورتی که عنصری با مقدار و اندازه ۲۰۰ پیکسل در ۱۵۰ پیکسل داشته باشیم, می توانیم با مشخص کردن شعاع هایی به مقدار و اندازه نصف عرض و همچنین ارتفاع عنصر آن هم را به یک بیضی تغییر پیدا کردن کنیم:

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-radius مشخص کردن آن مقادیر را بصورت خلاصه داشته باشیم.

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

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

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

از مجموع دو نقطه بالا به آن پس نتیجه آن می شود که می رسیم که بایستی و حتما هر یک از شعاع های افقی گوشه های بالا برابر با %۵۰ باشند.

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

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

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

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

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.

نقطه مهم آنکه در صورتی که عرض و همچنین ارتفاع نصف هم باشند (بنا به جهت شکل متغایر و متفاوت خواهد بود که کدام بایستی و حتما نصف کدام باشند؟) به شکل نیم دایره خواهیم رسید.

چارك بیضی

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

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

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 و همچنین کاربردهای آن هم را بهتر درک کنید:

منبع