advertise laitec sharif univercity تبلیغات در سایت سورس کد تبلیغات در سایت سورس کد
دانلود پروژه مدیریت کتابخانه با سی شارپ و SQL سرور

دانلود پروژه مدیریت کتابخانه با سی شارپ و SQL سرور

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

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

18000 تومان
سورس پروژه پایانی آزمون گیری با زبان سی شارپ و SQL

سورس پروژه پایانی آزمون گیری با زبان سی شارپ و SQL

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

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

15000 تومان
دانلود پروژه وب سایت هتل با HTML و ASP.NET

دانلود پروژه وب سایت هتل با HTML و ASP.NET

4900 تومان

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

سفارش پروژه در سورس کد

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

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