آموزش رابط کاربری(User Interface) در CSS

در این فصل، نکاتی را در مورد ویژگی های رابط کاربری زیر در CSS می آموزیم:

• resize
• outline-offset

ویژگی Resize در CSS

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

• horizontal: کاربر می تواند عنصر مورد نظر را به صورت افقی(width) تغییر اندازه دهد.
• vertical: کاربر می تواند عنصر مورد نظر را به صورت عمودی(height) تغییر اندازه دهد.
• both: کاربر می تواند عنصر مورد نظر را به صورت افقی و عمودی تغییر اندازه دهد.
• none: کاربر نمی تواند عنصر را تغییر اندازه دهد. 

تنها،تغییر دادن عرض(Width) عنصر در CSS

در مثال زیر، کاربر تنها می تواند عرض(width) یک عنصر <div> را تغییر دهد:

div {
  resize: horizontal;
  overflow: auto;
}

تنها تغییر دادن ارتفاع(Height) عنصر در CSS

در مثال زیر به کاربر امکان داده ایم تا تنها ارتفاع(height) یک عنصر <div> را تغییر اندازه دهد:

div {
  resize: vertical;
  overflow: auto;
}

تغییر اندازه دادن هردوی(both) عرض و ارتفاع یک عنصر در CSS

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

div {
  resize: both;
  overflow: auto;
}

غیرفعال کردن ویژگی Resize در عنصر Textarea

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

textarea {
  resize: none;
}

ویژگی outline-offset در CSS

ویژگی outline-offset یک فضا خالی را بین یک outline و کادر(border) یک عنصر اضافه می کند. فضای بین یک عنصر و outline آن، شفاف(transparent) می باشد. در مثال زیر، یک outline داریم که به مقدار 15px در بیرون از لبه ی border قرار گرفته است:

این پاراگراف یک کادر(border) به رنگ مشکی دارد و یک outline به رنگ قرمز دارد که از border به مقدار 15px فاصله دارد.

نکته: Outline با border تفاوت دارد! برخلاف border، یک outline در بیرون از کادرِ(border) عنصر ترسیم می شود و ممکن است با دیگر محتواها هم پوشانی کند. همچنین outline بخشی از ابعاد عنصر محسوب نمی شود. عرض(width) و ارتفاع(height) عنصر، تحت تاثیر عرض outline قرار نمی گیرند. 

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

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;
}