User Interface در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

outline-offset

با آخرین بخش از آموزشهای Css3 در خدمت شما هستم .آخرین ویژگی User Interface می باشد . این ویژگی دارای 3 متد می باشد
به وسیله خواص جدید معرفی شده در این بخش می توان اندازه عناصر ، نحوه نمایش و خروجی آنها را بر روی صفحه  ، تغییر داد .
ویژگی User Interface دارای 3 متد می باشد که در ادامه برای شما توضیح میدهم  .
خاصیت outline-offset یک خط حاشبه را برای عنصر تعیین کرده و آن را به دور عنصر ایجاد می کند .
خاصیت resize ، تعیین می کند که آیا کاربر می تواند اندازه یک عنصر را بر روی صفحه تغییر دهد یا خیر .


اینترنت اکسپلورر از دو ویژگی Resize و Outline-offset پشتیبانی نمی کند .
فایرفاکس ، اوپرا (متد Resize را پشتیبانی نمی کند) ، سافاری و کروم از ویژگیهای نامبرده شده پشتیبانی می کنند .

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

 

div
{
resize:both;
overflow:auto;
}

 

 کد اصلی قسمت بالا . (کد تایپ شده را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
 {
  border:2px solid;
  padding:10px 40px;
  width:300px;
  resize:both;
  overflow:auto;
  }
</style>
</head>
<body>
         <p><b>نکته:</b> این ویژگی در سافاری ، کروم و فایرفاکس پشتیبانی می شود.</p>
            <div>گوشه کادر را با ماوس به طرفین بکشید.</div>
</body>
</html>



مشاهده دمو در مرورگر

ویژگی Outline Offset در CSS3
outline-offset یک کادر خارجی ایجاد کرده و آن را با فاصله از مرز کادر اصلی چاپ میکند .

 

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

 



 کد اصلی قسمت بالا . (کد تایپ شده را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
      {
            margin:20px;
            width:150px;
            padding:10px;
            height:70px;
            border:2px solid black;
            outline:2px solid red;
            outline-offset:15px;
}
</style>
</head>
<body>
             <p><b>نکته:</b> این ویژگی در سافاری ، کروم و فایرفاکس پشتیبانی می شود.</p>
<div></div>
</body>
</html>

 

 

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:34

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا