advertise laitec sharif univercity استخراج بیت کوین با کامپیوتر استخراج بیت کوین با کامپیوتر
دانلود پروژه کامل مهندسی نرم افزار ، شرکت نرم افزاری

دانلود پروژه کامل مهندسی نرم افزار ، شرکت نرم افزاری

3000 تومان
سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

22000 تومان
دانلود PDF مجموعه 300 نکته جالب برنامه نویسی در سی شارپ #C

دانلود PDF مجموعه 300 نکته جالب برنامه نویسی در سی شارپ #C

3000 تومان
پروژه پایانی PHP وب سایت فروشگاه کامپیوتری

پروژه پایانی PHP وب سایت فروشگاه کامپیوتری

23000 تومان
دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

دانلود برنامه رنگ آمیزی گراف با الگوریتم عقبگرد در سی شارپ

3000 تومان

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

تولید بیت کوین با کامپیوتر

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

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