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

border radius اشکال افکتهای زیبا با

در این مطلب سعی داریم با استفاده از ویژگی های border-radius اشکال مختلفی رو بوجود بیاریم به عبارتی ساخت افکت های زیبا با استفاده از border-radius رو با هم یاد بگیریم . همونطور که همه ی ما میدانیم اگر برای border-radius هشت مقدار را قرار دهیم میتونیم اشکال پیچیده ای رو تولید کنیم .برای این منظور ما این مطلب رو از یک سایت معتبر ترجمه کردیم و در اختیار شما قرار دادیم برای اینکه با شکلی که میخوایم تولید کنیم بیشتر آشنا بشین وارد این سایت بشین و شکل رو ببینین …

خب رفتین دیدین ؟

همونطور که دیدین میشه با استفاده از اون ۴ دکمه ای که قرار داره میتونید شکل دلخواهتون رو تولید کنین و در قسمت پایین صفحه کد های css مربوط به اون رو بردارین و استفاده کنید .

حالت های مختلف border-radius

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

بیشتر بخوانید :   مقدمات شروع برنامه نویسی وب

ساده ترین حالت :مقادیر تکی

مطمئنا اگه به برنامه نویسی وب علاقه مند باشین حتما با css کار کردین و اگه با css کار کرده باشین حتما با border-radius هم کار کردین و میدونین که کار اصلی border-radius چیه . ویژگی border-radius سال ها پیش با css3 معرفی شد و ما از از اون به این صورت لستفاده میکنیم : border-radius:1em

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

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

همانطور که در مثال بالا مشاهده میکنید اگر مقدار border-radius را برابر را ۳۰% قرار دهیم همه گوشه ها به اندازه ۳۰ درصد گرد میشوند همچنین میتوان برای ساخت دایره از border-radius  پنجاه درصد استفاده کرد (border-radius:50%) این درصد براساس طول و عرض المنت داده شده است که اگر از مستطیل استفاده کنید و border-redius را مساوی ۵۰% قرار دهید گوشه های گردی را نخواهید داشت در ضمن شما میتوانید مقادیر rem و px و em را استفاده کنید .

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

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

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

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

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

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

گذاشتن هشت مقدار با /

همه ما با موارد بالا آشنایی داریم و به طور کامل از اونها تو برنامه هامون استفاه کردیم حالا بیایید یه کم تغییرات بدیم و به جای استفاده از ۴ مقدار از ۸ مقدار استفاده کنیم این میتونه ویژگی جالبی رو برای ما بوجود بیاره .به نظرتون چه اتفاقی میفته ؟

بیشتر بخوانید :   میخوای برنامه نویس وب بشی

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

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

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

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

شکل زیر همون دایره های فرضی هستند که در پشت صحنه اتفاق افتاده اند …

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

با استفاده این ویژگی میتوانید افکتهایی مانند افکتهای زیر تولید کنید …

این هم یک نمونه از استفاده از این کد :

See the Pen YJjLye by farzanenaghshbandy (@farzanenaghshbandy) on CodePen

ترجمه شده توسط فرزانه نقش بندی از وب سایت medium.com

۰ پاسخ

منتظریم ببینیم نظر شما چیه ؟

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *