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

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

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

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

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

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

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

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

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

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

10000 تومان

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

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

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