CSS3  ویژگی های رابط کاربری جدیدی دارد همانند تغییر اندازه عناصر، نمای کلی و اندازه قاب دارد
  • 1395/3/18 6/7/2016 4:42:55 PM 6/7/2016 4:42:55 PM
  • 0
  • 421

CSS3  ویژگی های رابط کاربری جدیدی دارد همانند تغییر اندازه عناصر، نمای کلی و اندازه قاب دارد.

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

  • resize
  • outline-offset

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

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

 

خصوصیت

IE

Chrome

Firefox

Safari

Opera

resize

عدم پشتیبانی

4.0 –

5.0

4.0 –

Moz-

4.0

15.0

outline-offset

عدم پشتیبانی

4.0 –

outline-offset

4.0

9.5

 


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

خصوصیت تغییر اندازه مشخص می کند که آیا اندازه عنصر توسط کاربر قابل تغییر باشد یا نه.

 

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


مثال

div {
    resizehorizontal;
    overflowauto;
}

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


مثال

div {
    resizeboth;
    overflowauto;
}


نقطه شروع خطوط بیرونی CSS3

خصوصیت outline-offset یک فاصله بین یک خط بیرونی و لبه یا مرز یک عنصر اضافه می کند

خطوط بیرون به دو شیوه با مرزها متمایز می شوند:

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

مثال زیر از خصوصیت outline-offset استفاده می کند تا 15 پیکسل فاصله بین مرز و خط بیرون اضافه کند:


مثال

div {
    border1px solid black;
    outline1px solid red;
    outline-offset15px;
}


خصوصیت رابط کاربری CSS3

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

شرح

خصوصیت

اجازه می دهد حاشیه و مرز را در عرض و ارتفاع کلی عنصر داشته باشید

box-sizing

مشخص می کند که وقتی که از کلید فلش پایین استفاده می کنید، کجا هدایت شوید.

nav-down

ترتیب تب های یک عنصر را مشخص می کند

nav-index

مشخص می کند که وقتی که از کلید فلش چپ استفاده می کند، کجا هدایت شوید.

nav-left

مشخص می کند که وقتی که از کلید فلش راست استفاده می کنید، کجا هدایت شوید.

nav-right

مشخص می کند که وقتی که از کلید فلش بالا استفاده می کنید، کجا هدایت شوید.

nav-up

یک فاصله بین خط بیرونی و لبه یا مرز یک عنصر اضافه می کند

outline-offset

مشخص می کند که آیا اندازه عنصر توسط کاربر تغییر پذیر باشد یا نه

resize

 

 

محمد انصاری

من به عنوان طراح و برنامه نویس در شرکت توسن در حوزه ی بانکداری فعالیت می کنم. بیشتر زمانم رو به مطالعه پیرامون طراحی نرم افزار اختصاص میدم. همچنین علاقه ی زیادی به فعالیت های ورزشی دارم و زمان کافی به ورزش اختصاص می دهم.

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
رابط کاربری CSS3
زیگماوب