رابط کاربری

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

رابط کاربری در CSS

در این فصل در مورد ویژگی‌های رابط کاربری زیر در CSS مطالبی را خواهید آموخت:[۱]

  • resize
  • outline-offset

پشتیبانی مرورگرها

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

ویژگی Chrome Internet Explorer / Edge Firefox Safari Opera
resize ۴٫۰ پشتیبانی نمی‌شود ۵٫۰ ۴٫۰ ۱۵٫۰
outline-offset ۴٫۰ ۱۵٫۰ ۵٫۰ ۴٫۰ ۹٫۵

تغییر سایز در CSS

ویژگی resizeمشخص می‌کند که آیا (و چگونه) یک عنصر می‌بایست توسط کاربر تغییر سایز داده شود.

این عنصر <div> قابل تغییر سایز به وسیله کاربر است.

برای تغییر سایز: کلیک کنید، و گوشه پایین سمت راست این عنصر div را Drag کنید.

نکته: internet explorer از ویژگی Resize پشتیبانی نمی‌کند.

مثال زیر به کاربر اجازه می‌دهد فقط عرض یک عنصر <div> را تغییر سایز دهید:

مثال
1 div {
2   resize: horizontal;
3   overflow: auto;
4 }


مثال زیر به کاربر اجازه می‌دهد فقط ارتفاع یک عنصر <div> را تغییر سایز دهد:

مثال
1 div {
2   resize: vertical;
3   overflow: auto;
4 }


مثال زیر به کاربر اجازه می‌دهد هم ارتفاع و هم عرض یک عنصر <div> را تغییر سایز دهید:

مثال
1 div {
2   resize: both;
3   overflow: auto;
4 }


در بسیاری از مرورگرها، <textarea> به صورت پیش‌فرض قابلیت تغییر سایز دارد. در اینجا، ما از ویژگی resize استفاده کردیم تا خاصیت تغییر سایز را غیرفعال کنیم:

مثال
1 textarea {
2   resize: none;
3 }


Outline Offset در CSS

ویژگی outline-offset فاصله ای را بین یک outline و لبه یا کادر عنصر اضافه می‌کند.

این div یک outline به اندازه 15px بیرون از لبه‌های کادر دارد.

نکته: outline با کادرها متفاوت است. برخلاف کادر، outline خارج کادر عنصر کشیده می‌شود و ممکن است با سایر محتوا هم‌پوشانی داشته باشند. همچنین، outline بعنوان بخشی از ابعاد عنصر حساب نمی‌شود؛ مجموع عرض و ارتفاع عنصر تحت تأثیر عرض outline قرار نمی‌گیرد.

مثال زیر از ویژگی outline-offset برای اضافه‌کردن فاصله بین کادر و outline استفاده می‌کند:

مثال
 1 div.ex1 {
 2   margin: 20px;
 3   border: 1px solid black;
 4   outline: 4px solid red;
 5   outline-offset: 15px;
 6 }
 7 
 8 div.ex2 {
 9   margin: 10px;
10   border: 1px solid black;
11   outline: 5px dashed blue;
12   outline-offset: 5px;
13 }


ویژگی‌های رابط کاربری در CSS

جدول زیر تمامی ویژگی‌های رابط کاربری را لیست می‌کند:

ویژگی توضیحات
outline-offset فاصله ای بین یک outline و لبه یا کادر یک عنصر اضافه می‌کند
resize مشخص می‌کند که آیا اندازه یک عنصر باید توسط کاربر قابل تغییر باشد یا نه


منابع آموزشی