طراحی سایت در شرکت طراحی سایت مبنا
طراحی سایت هدف نیست، ارتقا تجارت هدف است

رابط کاربری در CSS3

10 / 10 از 1 کاربر

CSS3 دارای ویژگی های جدید رابط کاربری مانند عناصر تغییر سایز، طرح های کلی (outlines)، و اندازه باکس ها است. در این مقاله از طراحی سایت شما ویژگی رابط کاربری های زیر را می آموزید:

• resize
• outline-offset

تغییر اندازه در CSS3

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

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

div {
resize: horizontal;
overflow: auto;
}

در صورتی که میخواهید امکان تغییر ارتفاع را به کاربر بدهید در مثال بالا به جای “horizontal” از عبارت “vertical” در طراحی سایت خود استفاده کنید. و اگر تمایل به تغییر سایز هردو عرض و ارتفاع را دارید از عبارت “both” استفاده کنید.

افست زمینه (Outline Offset) در CSS3

این ویژگی در طراحی سایت ، فضایی را بین زمینه و حاشیه یا مرز یک عنصر اضافه می کند.
Outlineها به دو روش از حاشیه ها متفاوت هستند:

• یک Outline خطی است که در اطراف عنصرها و در خارج از مرز حاشیه کشیده می شود.
• یک Outline ممکن است غیر مستطیلی باشد.
در مثال زیر از ویژگی outline-offset برای اضافه کردن یک فضای 15px بین حاشیه و outline استفاده شده است.

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

ویژگی های رابط کاربری CSS3

در جدول زیر ویژگی های رابط کاربری در CSS3 و کاربرد آنها در طراحی سایت شرح داده شده است.

 

ویژگی

 

 

کاربرد

box-sizing

این امکان را به شما می دهد تا  padding و border را در عرض و ارتفاع کلی یک عنصر شامل کنید.

nav-down

مشخص می کند که زمانی که از کلید هدایت arrow-down (فلش به سمت پایین) استفاده می کنید به کجا هدایت شوید.

nav-index

 

nav-left

مشخص می کند که زمانی که از کلید هدایت arrow- left (فلش به سمت چپ) استفاده می کنید به کجا هدایت شوید.

nav-right

مشخص می کند که زمانی که از کلید هدایت arrow- right (فلش به سمت راست) استفاده می کنید به کجا هدایت شوید.

nav-up

مشخص می کند که زمانی که از کلید هدایت arrow- up (فلش به سمت بالا) استفاده می کنید به کجا هدایت شوید.

outline-offset

اضافه کردن فضا بین outline و border (یا edge) در یک عنصر

 

resize

مشخص کننده وجود و یا عدم وجود امکان تغییر سایز یک عنصر توسط کاربر است

ارسال نظر و نظرات ثبت شده
نام شما :
ایمیل :
تلفن تماس :
متن پیغام :