ساخت border radius های جذاب و عجیب در CSS

ویژگی border radius یکی از صفات بسیار کاربردی در طراحی سایت و خصوصا ربان CSS است که می‌توان گفت در تمامی وب سایت‌های امروزی وجود دارد . این ویژگی مسبب نرم شدن گوشه‌ها در طراحی خواهد شد . مطمئنا با این ویژگی آشنایی دارید اما برای درک بهتر یک نمونه خدمتتان مثال زدیم . به باکس زیر دقت کنید :

این باکس در حالت اولیه درارای گوشه‌های تیز در هر 4 طرف است . اکنون قصد داریم تا کمی حالت نرم به باکس خود اعمال کنیم . مثال زیر مصداق همین موضوع است :

در این باکس هر 4 گوشه بصورت نرم بوده و طراحی شما به نسبت بهتر و جذاب‌تر و البته امروزی است . این دستور یعنی دستور border radius دارای یک حالت کلی و چند حالت مشتق است که بصورت زیر تعریف می‌شوند :

border-radius : 8px;
border-radius : 8px 12px 8px 12px;
border-top-left-radius:12px;
border-top-right-radius:12px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-radius : 50%;

همانطور که شاهد هستید این دستور حالت‌های مختلفی دارد و همچنین می‌توانید با واحدهای پیکسل و % برای این صفت ، مقادیری را تعیین کنید .

اما این border radius ها اکثرا ساده هستند و نهایتا نمایی مثل باکس بالا خدمت شما ارائه خواهند کرد . اما چند نمونه جذاب از border radius ها را مشاهده کنیم .

border radius با طرح هلو و سه گوش

برای اینکه یک border radius با دیزاینی بصورت زیر داشته باشید که اصطلاحا طرح هلو یا PEACH نامیده می‌شود :

لازم است تا از این قطعه کد استفاده کنید :

border-radius: 38% 62% 49% 51% / 48% 52% 48% 52%;

یا برای مثال به نمونه زیر دقت کنید :

برای داشتن این border radius نیز باید از کد زیر استفاده کنید :

border-radius: 38% 62% 49% 51% / 65% 74% 26% 35%;

اما سئوال اصلی شاید این باشد که این border radius ها را چگونه تنظیم کنیم و ازکجا shape های جذاب برای border radius ها درست کنیم ؟

پاسخ این سئوال ساده است . از طریق ابزارهای آنلاینی که در اختیار داریم . یکی از ابزارهایی که امکان ساخت border radius با طرح های جذاب را به ما خواهد داد ، وب سایت ” htmlcssbuttongenerator ” است .

شما با ورود به ای وب سایت می‌توانید به سادگی و صرفا با چند کلیک ، یک border radius جذاب ایجاد کنید .

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

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا