ساخت اشکال و افکتهای زیبا با استفاده از border-radius



visibility  
mode_comment   ۶

در این مطلب  قصد داریم با استفاده از ویژگی border-radius در CSS اشکال Organic و بسیار زیبایی رو به وجود بیاریم و با استفاده از قدرت اون افکتهای فوق‌العاده‌ای رو پیاده‌سازی کنیم.

وقتی که برای ویژگی border-radius هشت مقدار رو قرار میدیم، میتونیم اشکال پیچیده و زیبایی رو به وجود بیاریم که واقعا به سایت ما زیبایی خاصی رو میبخشند.

شما میتونین در این سایت دمو و نحوه عملکرد این ویژگی رو ببینید:

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

استفاده حرفه‌ای از border-radius

در اینجا میخوایم حالتهای مختلفی که میتونین از border-radius استفاده کنید رو بهتون توضیح بدم. پس با سون لرن همراه باشید.

مقدار تکی

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

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

همونطور که میبینید در مثال بالا مقدار 30% رو برای a که همون مقدار border-radius هست، قرار دادیم. با اینکار همه گوشه‌های المنت مورد نظر به اندازه 30% گرد شدند. همونطور که اطلاع دارید در کنار مقادیر با واحدهای px و em و rem و ... میتونین از درصد هم برای border-radius استفاده کنیم.

برای ساخت دایره میتونیم مقدار border-radius رو برابر با 50% قرار بدیم. این مقادیر درصدی بر پایه width و height المنت مورد نظر محاسبه و اعمال میشن. پس مثلا زمانی که شما از این ویژگی برای یک المنت مستطیلی شکل استفاده میکنید، گوشه‌های متقارن نخواهید داشت.

در مثال زیر فرق border-radius: 110px و border-radius: 30% برای یک مستطیل رو بهتون نشون میدم:

همونطور که میبینید در حالتی که از درصد استفاده کردیم، گوشه‌های مستطیل متقارن نشدند و این حالت به این خاطر هست که مقادیر درصدی بر پایه width و height هستند و از اونجا که در المنت بالا width از height بزرگتر هست، پس مقدار border-radius افقی از عمودی بیشتر خواهد شد.

4 مقدار متفاوت

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

زمانی که شما بیشتر از یک مقدار برای border-radius قرار میدین، معنیش اینه که قصد دارید گوشه‌های المنت رو به اندازه‌های مختلفی گرد کنید. شما در ابتدا باید میزان radius گوشه بالا و سمت چپ را مشخص کنید و بعد از اون بصورت ساعتگرد بقیه گوشه‌ها رو مقداردهی کنید. شما میتونین از مقادیر درصدی و یا ترکیبی از مقادیر درصدی و ثابت برای مقدار radius گوشه‌ها در نظر بگیرید.

8 مقدار که با / جدا شده‌اند

به احتمال زیاد مواردی که در بالا بیان شده رو همتون قبلا تست کردید و میدونین چطوری کار میکنن. حالا داریم کم کم وارد بخش جالب این ویژگی میشیم. بنظرتون زمانی که 8 مقدار متفاوت برای border-radius قرار بدیم و اونا رو با / از هم جدا کنیم، چه اتفاقی میوفته؟

زمانی که مقادیر با استفاده از / جدا میشن، مقادیر قبل از slash به عنوان شعاع افقی و مقادیر بعد از slash به عنوان شعاع عمودی در نظر گرفته میشن. مثلا اگر بخوایم border-radius: 4em 8em را با border-radius: 4em / 8em مقایسه کنیم، بصورت زیر خواهند بود:

همونطور که میبینید وقتی مقادیر رو با / جدا میکنیم، شکل عجیبتری به وجود میاد. border-radius: 50% رو در نظر بگیرید. با اینکار مثل این میمونه که یک دایره با شعاع 50% در یک گوشه و دایره دیگری نیز با شعاع 50% در گوشه دیگر قرار دادید و در نتیجه 50% + 50% = 100% میشه و در نتیجه کل مربع به دایره تبدیل میشه و هیچ چیزی از ضلع مربع باقی نمیمونه.

اگر همین اصول رو برای هشت مقدار در نظر بگیرید، میتونین چنین اشکال زیبایی رو با استفاده از CSS به وجود بیارید:

اگر بخوایم ببینیم که چرا این حالت پیش اومده، میتونیم دایره‌های فرضی با شعاع مورد نظر رو قرار بدیم و ببینیم که در پشت صحنه چه اتفاقی افتاده است:

میبینید که در گوشه بالا و سمت چپ یک بیضی با شعاع افقی 70% و شعاع عمودی 60% قرار دادیم و همینطور به صورت ساعتگرد دایره‌ها رو با اعداد مورد نظر رسم کردیم و در نتیجه همون شکل مورد نظرمون به وجود میاد.

با استفاده از این ویژگی جالب، میتونیم افکتهایی مانند افکتهای زیر رو در سایت خودمون قرار بدیم:

میتونین از این ویژگی در انیمیشن‌ها نیز استفاده کنید و افکتهای زیبایی رو به وجود بیارید. مثال زیر رو ببینید: به همین راحتی.

اگر شما هم مثال یا نکته‌ای در مورد border-radius دارید، میتونین با کاربران سون لرن به اشتراک بزارید.

comment دیدگاه کاربران
habib66

ممنون ! مطلب جالب و کاربردی بود .

محمد اسفندیاری

موفق باشید دوست عزیز

نازمحمد گری

ممنون /مطلب جالبی بود

محمد اسفندیاری

موفق باشید

رجب محمدی

تشکر واقعا مطلبی خوبی بود

محمد اسفندیاری

موفق باشید دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.