CSS طراحی وب

خمیده کردن گوشه‌ی المان‌ها با CSS

مهدی خسروی
نوشته شده توسط مهدی خسروی

خمیده کردن گوشه‌ی المان‌ها با CSS

شاید گاهی برای شما هم پیش آمده باشد که المانی در صفحه‌ی وب داشته باشید و بخواهید گوشه‌های آن‌را گرد کنید و به آن ظاهر چشم نوازتری ببخشید. برای اینکار باید از CSS استفاده کنید. آموزش ویدئویی زیر روش اینکار را به شما توضیح داده است :

dl-btnدانلود ویدئوی آموزشی با کیفیت بالا و کاملا واضح (با حجم ۱۲ مگ)dl-btn

border radius چیست؟

حتما دیده‌اید که بعضی المان‌ها در سایت‌ها مانند تصاویر، جعبه‌ها و… دارای گوشه‌هایی گرد و خمیده‌ میباشد.

قبل از بوجود آمدن نسخه‌ی جدید css یعنی همان css3 اینکار با نرم‌افزارهایی مانند فتوشاپ و… انجام میشد. اما الان در css3 این امکان وجود دارد که با یک خط کد ساده گوشه‌ی المان‌ها را به اندازه دلخواه گرد و خمیده کنیم.

border radius در css

برای گرد کردن گوشه‌ی المان ها با استفاده از CSS فقط کافی است که در استایل دهی CSS مربوط به آن المان از دستور border-redius به این شکل استفاده کنیم :

.element{
     border-radius:5px;
}

مقداری که روبروی border-radius وارد می‌شود میتواند به هر واحدی باشد ولی در دنیای وب واحد پیکسل (px) رایج است و هرچه مقدار این عدد بیشتر باشد گوشه‌های المان ما بیشتر خمیده خواهد شد.

بیشتر بدانید:
چگونه از طریق برنامه نویسی ثروتمند شویم؟ - کسب درامد از برنامه نویسی

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

مهدی خسروی

مهدی خسروی

سلام، مهدی خسروی هستم، نویسنده کتاب «دوبار فکر کن، یک بار کد بزن» و مدرس دوره‌های طراحی و برنامه نویسی زنبیل.
همیشه، بزرگ‌ترین موضوعی که من را اذیت میکرد، نبود دوره‌های آموزشی باکیفیت، پروژه‌محور و حرفه‌ای به زبان فارسی بود. همین موضوع باعث شد «زنبیل» متولد شود.
اگر علاقمند به یادگیری هستید، دوره‌های رایگان و ویژه زنبیل را در آدرس xanbil.com/vip از دست ندهید.

درج نظر

This site uses Akismet to reduce spam. Learn how your comment data is processed.