گوشه گرد در وب؛ آموزش border-radius پیشرفته!

گوشه گرد در وب سایت ها و طراحی رابط کاربری، کاربرد زیادی دارد. در بیشتر مواقع گرد کردن گوشه عکس ها و باکس ها رابط کاربری را جذاب تر می کند.

طراحی رابط کاربری همیشه با طرح ها و نوآوری های جدیدی همراه است. اما برخی موارد هیچگاه قدیمی و یا تکراری نمی شوند. گوشه های گرد و یا خمیده یکی از این موارد است. این تغییر کوچک در طراحی، تاثیر بسیار زیادی بر روی حس کاربر می گذارد. در بیشتر زبان های طراحی لبه ها خمیده هستند. این مورد نشان دهنده جذابیت و کارایی این ترفند در طراحی رابط کاربری و طرح های گرافیکی است. قبل تر در مطلب «گرد کردن گوشه تصاویر در فتوشاپ» با روش اجرای آن در طرح های گرافیکی آشنا شدیم. در این مطلب با خاصیت border-radius در زبان CSS آشنا می شویم. در پایان کمی جلوتر رفته و به صورت پیشرفته تری با این قابلیت سی اس اس کار می کنیم.

گوشه گرد در وب با border-radius

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

border-radius: 10px 0 10px 0;

اگر بخواهیم تمام گوشه ها به اندازه ۱۰ پیکسل گرد شوند، به شکل زیر عمل می کنیم:

border-radius: 10px;

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

border-bottom-left-radius: 10px;

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

برای استفاده حرفه ای تر از border-radius و ایجاد گوشه گرد در وب سایت به شکلی متفاوت، باید کمی دقیق تر شویم. در واقع این خاصیت به دو زاویه تقسیم می شود. برای مثال در کد border-bottom-left-radius: 10px، مقدار زاویه ورود و خروج را برابر ۱۰ پیکسل قرار داده ایم. اما می توان این مقدار را جدا کرد. برای مثال در کد زیر زاویه ورود و خروج متفاوتی برای گوشه پایین چپ ایجاد می کنیم:

border-bottom-left-radius: 10px 20px;

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

border-radius: 10px 30px 5px 35px / 45px 5px 3px 10px;

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