تخفیف ویژه ماه محرم، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: moharam)
زمان باقی مانده

 السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

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

رابط کاربری یا (User Interface) در CSS3

Wiki

در CSS3 چند قابلیت جدید User Interface مانند تغییر اندازه عناصر توسط کاربر، تنظیم دقیق اندازه عنصر و کشیدن حاشیه با فاصله از لبه اصلی، اضافه شده است.
در این بیاموز، با ویژگی های زیر آشنا می شوید:

  • resize
  • box-sizing
  • outline-offset

پشتیبانی مرورگرها از User Interface در CSS3

Wiki

خصوصیتپشتیبانی مرورگرها
resize
box-sizing
outline-offset

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

مرورگرهای Internet Explorer, Chrome, Safari, Opera خاصیت box-sizing را پشتیبانی می کنند. Firefox به پیشوند -moz- نیاز دارد.

خاصیت outline-offset در تمام مرورگرهای اصلی، بغیر از Internet Explorer پشتیبانی می شود.


خاصیت resize در CSS3

Wiki

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

می توانید قابلیت تغییر اندازه عنصر را به سه صورت عمودی (vertical)، افقی (horizontal) و هر دو حالت (both) محدود کنید.

این <div> قابلیت تغییر اندازه توسط کاربر را دارد (در Firefox, Chrome, Safari)

مثال (رابط کاربری در CSS3)

عنصر <div> در مثال زیر، قابلیت تغییر اندازه توسط کاربر را دارد:

div
{
resize:both;
overflow:auto;
}
خودتان امتحان کنید »

خاصیت box-sizing در CSS3

Wiki

با استفاده از خصوصیت box_sizing می توانید عناصر را در یک ناحیه fit کنید.

در واقع با استفاده از خصوصیت های Width و Height تنها اندازه محتوا (Content) تعیین می شود و برای محاسبه اندازه واقعی Box، اندازه (Padding و Border و Margin) نیز باید به این اندازه اضافه شوند:

Width = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom

مقادیر box_sizing:

  • content-box: اندازه عنصر فقط شامل Content می شود و  Padding و Border و Margin محاسبه نمی شود. (مقدار پیشفرض)

  • border-box: اندازه عنصر شامل Content و Padding و Border می شود اما Margin محاسبه نمی شود. (این مدل در IE8 و نسخه های قبلی آن اعمال می شود)

  • padding-box: اندازه عنصر شامل Content و Padding می شود اما Margin و Border محاسبه نمی شود. (این مقدار فقط در مرورگر firefox قابل استفاده است)

مثال 1

چهار <div> با اندازه یکسان و خروجی های متفاوت:

<div> content </div>
<div class="div1">box-sizing:content-box</div>
<div class="div2">box-sizing:padding-box</div>
<div class="div3">box-sizing:border-box</div>
خودتان امتحان کنید »

مثال 2

در این مثال، دو عنصر <div> با عرض %50 داریم و چون خصوصیت float با مقدار "left" برای آنها تنظیم شده است، انتظار داریم که، در یک سطر، کنار هم قرار بگیرند. ولی چون دارای border و padding هستند این اتفاق نمی افتد مگر اینکه خصوصیت box-sizing را با مقدار "border-box" تنظیم نمایید:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
padding:5px;
}
خودتان امتحان کنید »

خاصیت outline-offset در CSS3

Wiki

با استفاده از خاصیت outline-offset می توانید خط outline را با فاصله از مرز لبه اصلی (border) چاپ کنید.

اگر مایلید در مورد خاصیت outline بیشتر بدانید به بیاموز CSS Outline مراجعه نمایید.

Outline و border دو تفاوت اصلی دارند:

  • عرض outline جزو ابعاد عنصر محسوب نمی شود.
  • outline می تواند اشکال غیر چهار ضلعی داشته باشد.
در این <div> خط outline با 15 پیکسل فاصله از border چاپ شده است.

مثال (رابط کاربری در CSS3)

مشخص کردن outline با 15 پیکسل فاصله از border:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
خودتان امتحان کنید »

خاصیت های User Interface در CSS3

Wiki

خاصیتتوضیحاتCSS
appearance Allows you to make an element look like a standard user interface element 3
box-sizing با استفاده از این خاصیت می توانید عناصر را در یک ناحیه fit کنید. 3
icon Provides the author the ability to style an element with an iconic equivalent 3
nav-down Specifies where to navigate when using the arrow-down navigation key 3
nav-index Specifies the tabbing order for an element 3
nav-left Specifies where to navigate when using the arrow-left navigation key 3
nav-right Specifies where to navigate when using the arrow-right navigation key 3
nav-up Specifies where to navigate when using the arrow-up navigation key 3
outline-offset با استفاده از این خاصیت می توانید خط outline را با فاصله از مرز لبه اصلی (border) چاپ کنید. 3
resize با استفاده از این خاصیت می توانید مشخص کنید که اندازه عنصر توسط کاربر قابل تغییر باشد یا خیر. 3

دیدگاه‌ها  

+1 # امیرکیان 1394-02-03 13:09
چرا قسمت مدیا در css3 وجود ندارد؛این که خیلی مهم است!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-02-04 11:18
متوجه منظورتون نمی شم ...! برای پخش صدا و تصویر در HTML5 از تگ audio و video استفاده می شود. حالا اگر منظورتون نحوه ی استایل دهی به آنهاست که براحتی قابل انجام است.
پخش ویدئو: http://beyamooz.com/html5/619-%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D9%88%DB%8C%D8%AF%D8%A6%D9%88-%D8%AF%D8%B1-html5
پخش صدا:http://beyamooz.com/html5/620-%D9%BE%D8%AE%D8%B5-%D8%B5%D8%AF%D8%A7-%D8%AF%D8%B1-html5
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهدی ربانی 1394-01-28 18:53
من از فایرفاکس 37 در لینوکس استفاده می کنم ولی خاصیت resize را پشتیبانی نمی کنه!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-01-28 19:03
در صورتی که می خواهید بدانید مرورگر شما از چه دستوراتی پشتیبانی می کند و از چه دستوراتی پشتیبانی نمی کند می توانید از سایت بسیار کاربردی زیر استفاده کنید:
css3test.com/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی