آموزش شعاع کادر (Border radius) ، حاشیه و سایه (ویدیوی آموزشی)

در طراحی وب، حاشیه‌ها (Borders) و شعاع کادر (Border Radius) ابزارهایی هستند که به ما کمک می‌کنند تا عناصر وب را زیباتر و متمایزتر نشان دهیم. همچنین، با اضافه کردن سایه‌ها (Shadows)، می‌توان عمق و جذابیت بیشتری به طرح‌ها بخشید. در این بخش از دوره جامع آموزش المنتور به بررسی نحوه ایجاد این سه ویژگی در المنتور می‌پردازیم.

حاشیه چیست؟

حاشیه به خطوطی گفته می‌شود که اطراف یک عنصر رسم می‌شوند. این خطوط به مشخص کردن مرزهای عنصر و جدا کردن آن از سایر بخش‌ها کمک می‌کنند. در المنتور، بیشتر عناصر به طور پیش‌فرض حاشیه‌ای ندارند. برای افزودن حاشیه، می‌توانید از گزینه Border Type استفاده کنید.

انواع حاشیه‌ در المنتور

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

1. حاشیه خطی (Solid): یک خط ساده که دور عنصر کشیده می‌شود.
2. حاشیه دو خطی (Double): شامل دو خط موازی که عنصر را قاب می‌کند.
3. حاشیه نقطه‌ای (Dotted): خطی متشکل از نقاط کوچک.
4. حاشیه خط‌چین (Dashed): خطی متشکل از خطوط کوتاه.
5. حاشیه فرورفته (Groove): ظاهری شبیه قاب عکس دارد.

تنظیمات حاشیه

• عرض حاشیه (Border Width): می‌توانید با تنظیم مقدار عرض، ضخامت حاشیه را تغییر دهید.
• رنگ حاشیه (Border Color): با استفاده از ابزار انتخاب رنگ یا رنگ‌های جهانی، رنگ دلخواه خود را اعمال کنید.
• شعاع کادر (Border Radius): گوشه‌های عنصر را گرد کنید تا ظاهر زیباتری داشته باشید.

آموزش ایجاد حاشیه در المنتور

برای ایجاد حاشیه برای یک المان در المنتور ، کافیست مراحل زیر را به ترتیب انجام دهید.

در المنتور، روی المان موردنظر کلیک کنید.

به تب استایل بروید.

گزینه حاشیه (Border) را پیدا کنید و باز کنید.

از بخش نوع حاشیه (Border Type) یکی از انواع حاشیه مانند (یکپارچه ، دوبل ، نقطه ای ، خط فاصله دار یا شیار) را انتخاب کنید.

در بخش ضخامت حاشیه ، میتوانید ضخامت آنرا تنظیم کنید

از بخش رنگ (Color)، رنگ حاشیه را مشخص کنید.

در صورت نیاز، مقدار شعاع کادر (Border Radius) را برای گرد کردن گوشه‌ها تنظیم کنید.

شعاع کادر (Border Radius) چیست؟

شعاع کادر یا اصطلاحا گردی گوشه ، ابزاری است که به شما امکان می‌دهد گوشه‌های عناصر را گرد کنید. این ویژگی به خصوص در طراحی‌های مدرن بسیار کاربردی است و به عناصر شما ظاهری نرم‌تر و دوستانه‌تر می‌بخشد.

تنظیم شعاع کادر در المنتور

المنتور دو نوع کنترل برای شعاع کادر ارائه می‌دهد:

1. کنترل اسلایدری: با کشیدن نوار لغزنده می‌توانید شعاع کادر را تنظیم کنید.
2. کنترل عددی: می‌توانید شعاع هر گوشه را به صورت جداگانه با وارد کردن اعداد تغییر دهید.

سایه چیست ؟ آموزش افزودن سایه به المان در المنتور

سایه‌ها به عناصر وب کمک می‌کنند تا از سطح صفحه برجسته‌تر به نظر برسند و حس عمق ایجاد کنند. این ویژگی به جذابیت بصری طراحی شما می‌افزاید.

تنظیم سایه در المنتور

برای افزودن سایه به یک عنصر:

روی المان مورد نظر کلیک کنید تا تنظیمات آن باز شود.

در تب استایل ، پایین قسمت حاشیه ، روی آیکن سایه کادر کلیک کنید تا تنظیمات آن باز شود.

جهت سایه: با استفاده از تنظیمات افقی و عمودی، جهت سایه را مشخص کنید.

رنگ سایه: با استفاده از ابزار انتخاب رنگ، رنگ سایه را تنظیم کنید.

پراکندگی سایه: تنظیم کنید که سایه چقدر گسترده یا متمرکز باشد.

جمع‌بندی

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