رابط کاربری CSS

در این فصل در مورد رابط کاربری خواص CSS یاد خواهید گرفت:

  • resize
  • outline-offset

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

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

ویژگی
resize
4.0
Not supported
5.0
4.0 -moz-
4.0
15.0
outline-offset
4.0
Not supported
5.0
4.0 -moz-
4.0
9.5

تغییر اندازه CSS

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

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

resize در css
.div {
    resize: horizontal;
    overflow: auto;
}
مشاهده مثال

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

ویژگی resize
.div {
    resize: vertical;
    overflow: auto;
}
مشاهده مثال

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

ارتفاع و عرض
.div {
    resize: both;
    overflow: auto;
}
مشاهده مثال

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

texterea
textarea {
    resize: none;
}
مشاهده مثال

Outline Offset  در CSS

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

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

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

ویژگی outline-offset
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 یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز