آموزش رابط کاربری CSS

13 جولای 2021

رابط کاربری CSS

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

  • resize
  • outline-offset

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

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


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

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

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

مثال

div {
  resize: horizontal;
  overflow: auto;
}

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

مثال

div {
  resize: vertical;
  overflow: auto;
}

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

مثال

div {
  resize: both;
  overflow: auto;
}

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

مثال

textarea {
  resize: none;
}

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.