2019 September 20 - جمعه 29 شهرويور 1398
آموزش Css3 – قسمت یازدهم – رابط کاربری UI
کد خبر: ١٩٤١ تاریخ انتشار: ١٧ بهمن ١٣٩١ - ١٩:٢٣ تعداد بازدید: 1749
آموزش Css3 – قسمت یازدهم – رابط کاربری UI

سلام

امروز می خواهم راجع به برخی از قابلیتها که در طراحی رابط کاربری کاربرد دارند صحبت کنم.
خاصیتهایی که در این مقاله معرفی می کنم عبارتند از :
resize
box-sizing
outline-offset

سلام

امروز می خواهم راجع به برخی از قابلیتها که در طراحی رابط کاربری کاربرد دارند صحبت کنم.

خاصیتهایی که در این مقاله معرفی می کنم عبارتند از :

resize

box-sizing

outline-offset

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

خاصیت resize در مرورگرهای Firefox , Safari , Chrome پشتیبانی می گردد.

خاصیت box-sizing در مرورگرهای IE , Chrome , Opera پشتیبانی می شود.

خاصیت box-sizing در Firefox با پیشوند -moz- پشتیبانی می گردد.

خاصیت box-sizing در Safari با پیشوند -webkit- پشتیبانی می گردد.

خاصیت outline در همه مرورگرهای جدید پشتیبانی می شود.

Resizing در Css3

خاصیت Resizing در سی اس اس ۳ تعیین می کند که یک جزء در صفحه وب قابلیت تغییر سایز توسط کاربر را داشته باشد یا نداشته باشد.

مثال ۱ :

div
{
resize:both;
overflow:auto;
}

در مثال بالا تعریف شده که تگ div قابلیت تغییر سایز داشته باشد.

box-sizing در Css3

خاصیت box-sizing در سی اس اس ۳ تعیین می کند که محل قرار گیری یک جزء در صفحه وب چگونه باشد.

مثال ۲ :

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

در مثال بالا دو جعبه پشت به پشت هم نمایش داده شوند.

Outline Offset در Css3

خاصیت Outline Offset نوع حاشیه ها را در سی اس اس ۳ تعیین می کنند. شما می توانید نوع و ضخامت حاشیه بیرونی را تعیین کنید همچنین میزان فاصله آن از حاشیه اصلی قابل تعریف است.

مثال ۳ :

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

در مثال بالا نوع حاشیه بیرونی Solid و به رنگ قرمز و به ضخامت ۲ پیکسل می باشد. همچنین فاصله از حاشیه اصلی ۱۵ پیکسل می باشد.

موفق باشید



Share
* نام:
ایمیل:
* نظر:

آخرین مطالب


صفحه اصلی | تماس با ما | درباره ما | آرشیو | پیوندها | RSS
طراحی و تولید: مؤسسه احرار اندیشه