میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

رابط کاربری (User Interface) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش رابط کاربری (User Interface) در CSS با من همراه باشید.

در CSS3 چند قابلیت جدید User Interface مانند تغییر اندازه عناصر توسط کاربر، تنظیم دقیق اندازه عنصر و کشیدن حاشیه با فاصله از لبه اصلی، اضافه شده است.

  • resize
  • outline-offset

با تنظیم رابط کاربردی در CSS که شامل ویژگی های outline-offset و resize می باشد می توان به کاربران اجازه ی تغییر اندازه ی عناصر و فواصل بین خطوط داخلی و خارجی را تعیین کرد.

 


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

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

عدد قبل از عبارات -webkit- یا -moz- نسخه ای از مرورگر را نشان می دهد که برای پشتیبانی از ویژگی های فوق نیاز به این پیشوندها دارد.

ویژگیChromeInternet Explorer / EdgeFirefoxSafariOpera
resize۴٫۰۱۵٫۰۵٫۰
۴٫۰ -moz-
۴٫۰۱۵٫۰
outline-offset۴٫۰۱۵٫۰۵٫۰
۴٫۰ -moz-
۴٫۰۱۵٫۰

 


ویژگی resize

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

dd

 

با افزودن کد css زیر به عنصر <div> فوق، قابلیت تغییر اندازه ی آن را برای کاربران فراهم می کنیم.

مثال : تغییر اندازه عرض در css

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

مثال : تغییر اندازه ی ارتفاع
div {
  resize: vertical;
  overflow: auto;
}

با افزودن کد زیر نیز به کاربر اجازه ی تغییر اندازه عرض و ارتفاع عناصر را می دهید:

مثال : تغییر اندازه ی عرض و ارتفاع در css
div {
  resize: both;
  overflow: auto;
}

در اکثر مرورگر ها به طور پیش فرض عنصر <textarea> قابل تغییر اندازه است.

شما می توانید با افزودن کد زیر ویژگی قابلیت تغییر اندازه را حذف کنید:

مثال : غیر فعال کردن قابلیت تغییر اندازه

 


ویژگی outline-offset

ویژگی outline-offset فاصله ی بین لبه ی خط خارجی و border یک عنصر را تنظیم می کند.

خطوط مختلف از مرزها به سه شکل متفاوت است:

  • یک outline یک خط کشیده در اطراف عناصر، خارج از لبه مرزی است.
  • یک outline فضای لازم را ندارد.

ds

در مثال زیر از ویژگی outline-offset برای افزودن فاصله بین border داخلی و خارجی استفاده می شود.

مثال : فاصله بین مرز اصلی و خارجی

 


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

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

امیدواریم آموزش رابط کاربری (User Interface) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssuser interfaceuser interface به فارسیuser interface چیستw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟