آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش CSS - واسط کاربری
ویژگی واسط کاربری (User Interface) به شما اجازه می‌دهد هر المان را به یکی از چندین المان واسط کاربری استاندارد تبدیل کنید.
برخی از ویژگی‌های معمولی که در واسط کاربری CSS3 استفاده می‌شوند، شامل موارد زیر می‌شود:
| ردیف | مقدار و توضیحات |
|---|---|
| ۱ |
appearance (ظاهر) برای اجازه دادن به کاربر برای تبدیل المان به المان‌های واسط کاربری استفاده می‌شود. |
| ۲ |
box-sizing (اندازه جعبه) به کاربران اجازه می‌دهد المان‌ها را به صورت دقیق در یک محدوده ثابت قرار دهند. |
| ۳ |
icon (نماد) برای قرار دادن نماد در یک محدوده استفاده می‌شود. |
| ۴ |
resize (تغییر اندازه) برای تغییر اندازه المان‌ها درون محدوده استفاده می‌شود. |
| ۵ |
outline-offset (فاصله حاشیه) برای رسم حاشیه در پشت این المان استفاده می‌شود. |
| ۶ |
nav-down (حرکت به پایین) برای حرکت به پایین پس از فشردن دکمه پایین در کیبورد استفاده می‌شود. |
| ۷ |
nav-left (حرکت به چپ) برای حرکت به چپ پس از فشردن دکمه چپ در کیبورد استفاده می‌شود. |
| ۸ |
nav-right (حرکت به راست) برای حرکت به راست پس از فشردن دکمه راست در کیبورد استفاده می‌شود. |
| ۹ |
nav-up (حرکت به بالا) برای حرکت به بالا پس از فشردن دکمه بالا در کیبورد استفاده می‌شود. |
مثالی از خاصیت resize
خاصیت resize دارای سه مقدار رایج زیر است:
- horizontal (افقی)
- vertical (عمودی)
- both (هر دو)
استفاده از مقدار both در خاصیت resize در رابط کاربری css3:
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>example.com</div>
</body>
</html>
خط کشی محیطی CSS3
Outline یعنی رسم یک خط در اطراف عنصر در بیرون از حاشیه.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>example.com</div>
</body>
</html>
* تبریک میگم شما درس واسط کاربری را با موفقیت مطالعه کردید و به پایان رساندید ،حالا پیش به سوی درس بعدی و یادگیر بیشتر...