۶
آبان

جلسه ۵۷ : رابط کاربری (User Interface) در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. تاکنون ویژگی ها و خصوصیاتی را برای تنظیم حالات نمایش متن ها در عناصر مختلف HTML در جلسات قبلی ارائه کردیم. در این جلسه قصد داریم به دو ویژگی مهم در تنظیم حالت نمایش متن در عناصر HTML بپردازیم که در کیفیت رابط کاربری در CSS نقش مهمی داشته و محتوای متن را در قالب یک عنصر HTML به خوبی در معرض دید کاربران قرار می دهد، در ادامه این مبحث برای آشنایی با تنظیم رابط کاربری در CSS با ما همراه باشید.

تنظیم رابط کاربری در CSS

تنظیم رابط کاربردی در CSS شامل تنظیم دو گزینه ی resize و outline-offset است که به توضیح هر یک پرداخته ایم.

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

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

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

ویژگی	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
resize	۴٫۰	۱۵٫۰	۵٫۰ ۴٫۰ -moz-	۴٫۰	۱۵٫۰
outline-offset	۴٫۰	۱۵٫۰	۵٫۰ ۴٫۰ -moz-	۴٫۰	۹٫۵

ویژگی resize

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

تنظیم رابط کاربری در CSS

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

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

div {
  resize: horizontal;
  overflow: auto;
}

div {

resize: horizontal;

overflow: auto;

}

خودتان امتحان کنید »

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

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

div {
  resize: vertical;
  overflow: auto;
}

div {

resize: vertical;

overflow: auto;

}

خودتان امتحان کنید »

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

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

div {
  resize: both;
  overflow: auto;
}

div {

resize: both;

overflow: auto;

}

خودتان امتحان کنید »

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

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

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

textarea {
  resize: none;
}

textarea {

resize: none;

}

خودتان امتحان کنید »

ویژگی outline-offset

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

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

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

تنظیم رابط کاربری در CSS – outline

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

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

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

div.ex1 {

margin: 20px;

border: 1px solid black;

outline: 4px solid red;

outline-offset: 15px;

}

div.ex2 {

margin: 10px;

border: 1px solid black;

outline: 5px dashed blue;

outline-offset: 5px;

}

خودتان امتحان کنید »

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

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

کلام آخر

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

QR: جلسه ۵۷ : رابط کاربری (User Interface) در CSS

به اشتراک بگذارید

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

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۷ : رابط کاربری (User Interface) در CSS

مقدمه

تنظیم رابط کاربری در CSS

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

ویژگی resize

ویژگی outline-offset

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

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ