انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

واسط کاربری UI در CSS

CSS3 UI

در CSS3 چند قابلیت در رابطه با رابطه کاربری یا UI افزوده شده است.

در این درس شما با ویژگی های زیر آشنا می شوید :

  • resize
  • outline-offset

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

دستور resize در فایرفاکس 4+ ، کروم و سافاری پشتیبانی میشود.
همه ی مرورگرهای معروف به جز اینترنت اکسپلورر از outline پشتیبانی میکنند.
ویژگی resize در CSS3

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

اندازه این div توسط کاربر قابل تغییر است .

نمونه (کادر div با قابلیت تغییر اندازه)
Internet ExplorerFirefoxChromeSafariOpera
div {
resize:both;
overflow:auto;
}
ویژگی Outline Offset در CSS3

outline-offset یک کادر خارجی ایجاد کرده و آن را با فاصله از مرز کادر اصلی چاپ میکند .
This div has an outline 15px outside the border edge.

سی اس اسی که استفاده شد به صورت زیر است :
نمونه (outline-offset)
Internet ExplorerFirefoxChromeSafariOpera
div {
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .