advertise laitec sharif univercity
دانلود پروژه پایانی طراحی وب سایت مخابرات با Asp.net

دانلود پروژه پایانی طراحی وب سایت مخابرات با Asp.net

48000 تومان
سورس پروژه دفترچه تلفن ساده در سی شارپ #c و بانک Access

سورس پروژه دفترچه تلفن ساده در سی شارپ #c و بانک Access

10000 تومان
دانلود سورس پروژه فروشگاه کیف با asp.net و sql express

دانلود سورس پروژه فروشگاه کیف با asp.net و sql express

10000 تومان
دانلود سورس بازی اندروید جدول خونه (900 جدول) همراه آموزش راه اندازی

دانلود سورس بازی اندروید جدول خونه (900 جدول) همراه آموزش راه اندازی

99000 تومان
دانلود سورس پروژه پایانی وب سایت بنگاه املاک با php

دانلود سورس پروژه پایانی وب سایت بنگاه املاک با php

68000 تومان

ویژگی های واسط کاربری جدید CSS3

CSS3 سی اس اس3 دارای چند ویژگی جدید رابط کاربری user interface مانند عناصر تغییر اندازه resizing برای تغیر اندازه عناصر توسط کاربران و outline(فضای بین outline و border) و box sizing می باشد.
ویژگی های واسط کاربری جدید CSS3

ویژگی های واسط کاربری جدید CSS3

CSS3 دارای چند ویژگی جدید رابط کاربری مانند عناصر تغییر اندازه resizing، outline و box sizing می باشد.

ویژگی های زیر را در اینجا بحث خواهیم کرد: 

► resize

► outline-offset

► box-sizing

 

پشتیبانی مرورگرها از ویژگی های user interface جدید در css3

اولین نسخه های مرورگرهایی که بطور کامل از ویژگی resize پشتیبانی کرده اند، بصورت زیر می باشد:

► مرورگر chrome  : نسخه 4.0

► مرورگر internet Explorer : پشتیبانی نمی شود

► مرورگر FireFox : ورژن  5.0

► مرورگر Opera : نسخه 15

► مرورگر safari : نسخه 4

 

اولین نسخه های مرورگرهایی که بطور کامل از ویژگی outline-offset پشتیبانی کرده اند، بصورت زیر می باشد:

► مرورگر chrome  : نسخه 4.0

► مرورگر internet Explorer : پشتیبانی نمی شود

► مرورگر FireFox : ورژن  5.0

► مرورگر Opera : نسخه 9.5

► مرورگر safari : نسخه 4

 

اولین نسخه های مرورگرهایی که بطور کامل از ویژگی box-sizing پشتیبانی کرده اند، بصورت زیر می باشد:

► مرورگر chrome  : نسخه 10

► مرورگر internet Explorer : نسخه 8.0

► مرورگر FireFox : ورژن  29.0

► مرورگر Opera : نسخه 9.5

► مرورگر safari : نسخه 5.1

 

 

ویژگی resizing در CSS3

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

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

div {
    resize: horizontal;
    overflow: auto;
}

 

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

div {
    resize: vertical;
    overflow: auto;
}

 

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

div {
    resize: both;
    overflow: auto;
}

 

خاصیت Outline Offset در سی اس اس3

این خاصیت فضایی را بین طرح کلی و حاشیه عنصر اضافه میکند.

خطوط کلی به سه روش از حاشیه جدا می شوند:

► طرح کلی یک خط کشیده شده در اطراف عناصر خارج از حاشیه است.

► یک طرح کلی ممکن است غیر مستطیلی باشد.

► outline فضایی را نمی گیرد.

 

در مثال زیر از ویژگی  outline-offset برای ایجاد فاصله ای به اندازه 15 پیکسل بین حاشیه و طرح کلی استفاده شده است.

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

 

ویژگی های user interface در CSS3

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

► box-sizing : اجازه می دهد که در عرض و ارتفاع کلی عناصر پد و حاشیه را لحاظ کنید.

► nav-down  :  مشخص میکند که در صورت فشردن کلید جهتی پایین، به کجا حرکت کنید.

 nav-index : نتیجه فشردن کلید tab روی کد را تعیین میکند.

 nav-left : تعیین میکند در صورت فشردن کلید چپarrow  صفحه برنامه به کجا هدایت شود.

► nav-right : تعیین میکند در صورت فشردن کلید جهتی سمت راست، صفحه برنامه به کجا هدایت شود.

► nav-up : : تعیین میکند در صورت فشردن کلید جهتی سمت بالا، صفحه برنامه به کجا هدایت شود.

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

► resize : قابلیت تغییر اندازه عناصر توسط کاربر را تعیین میکند.

 

ویژگی Box Sizing در CSS3

خاصیت Box Sizing امکان اضافه کردن لایه و حاشیه در مجموع عرض و ارتفاع عناصر را فراهم میکند.

 

بدون وجود ویژگی Box Sizing در CSS3

به طور پیش فرض، عرض و ارتفاع یک عنصر مانند این محاسبه می شود:

عرض + padding + حاشیه  = عرض واقعی یک عنصر

ارتفاع + padding + حاشیه  = ارتفاع واقعی یک عنصر

این یعنی، وقتی شما عرض/ ارتفاع یک عنصر را تنظیم میکنید، عنصر اغلب بزرگتر از اندازه ای که شما تعیین کرده اید، نمایش داده می شود به این دلیل که اندازه پد و حاشیه عنصر نیز به عرض و ارتفاع آن اضافه خواهد شد. بنابراین برای مدت طولانی توسعه دهندگان وب، مقدار کمتری از عرضی که می خواستند در نظر می گرفتند و اندازه لایه و حاشیه اطراف عنصر را از آن کم می کردند.

ویژگی box-sizing در CSS3 این مشکل را حل کرده است.

 

استفاده از ویژگی Box Sizing در CSS3

 اگر شما دستور box-sizing: border-box; را روی عنصری تنظیم کنید، اندازه پد و حاشیه عنصر نیز در  عرض و ارتفاع محاسبه می شوند.

در مثال زیر خاصیت Box Sizing در عنصر div اضافه شده است.

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

 

 



0
نظرات

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
css3 چه امکاناتی برای واسط کاربری بهتر دارد؟ویژگی Box Sizing در CSS3 برای user interface کارآمدویژگی resizing در CSS3پشتیبانی مرورگرها از ویژگی های user interface جدید در css3کاربرد پراپرتی جدید واسط کاربری resizing در سی اس اس3معرفی ویژگی های رابط کاربری CSS3استفاده از ویژگی Box Sizing در CSS3معرفی خاصیت Outline Offset در سی اس اس3خصوصیات جدید css3 مربوط به user interfaceتمامی ویژگی های user interface در CSS3آشنایی با چند خواص جدید سی اس اس3 برای واسط کاربری لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php