CSS User Interface
۱. ویژگیهای CSS مخصوص رابط کاربری (CSS UI Properties)
این ویژگیها به شما کمک میکنند تا ظاهر المانهای رابط کاربری مثل دکمهها، فیلدهای ورودی، اسکرول بار و غیره را کنترل کنید:
* `resize` — تعیین میکند که آیا کاربر بتواند اندازه المان (مثل textarea) را تغییر دهد یا نه.
* `outline` — برای اضافه کردن خط دور المان، معمولا برای حالات فوکوس استفاده میشود.
* `cursor` — تغییر شکل نشانگر موس هنگام حرکت روی المان.
* `pointer-events` — کنترل میکند که آیا المان بتواند رویدادهای موس را دریافت کند یا نه.
* `appearance` — کنترل ظاهر پیشفرض المانهای رابط کاربری مثل دکمهها یا فیلدها.
* `box-sizing` — تعیین نحوه محاسبه اندازه کلی المان (مهم برای چینش).
* `user-select` — کنترل میکند که آیا متن داخل المان قابل انتخاب باشد یا نه.
* `scrollbar-width` و `scrollbar-color` — برای تغییر ظاهر اسکرول بار در بعضی مرورگرها.
—
۲. شبهکلاسهای مربوط به وضعیتهای UI
* `:hover` — وقتی موس روی المان قرار دارد.
* `:focus` — وقتی المان فوکوس دارد.
* `:active` — وقتی المان فعال یا کلیک شده است.
* `:disabled` — وقتی المان غیرفعال است.
* `:checked` — برای چکباکسها یا رادیوباتنها.
—
۳. نمونه: استایل دادن به یک دکمه
“`css
button {
appearance: none; /* حذف ظاهر پیشفرض */
background-color: #007BFF; /* رنگ پسزمینه آبی */
color: white; /* رنگ متن سفید */
border: none; /* بدون حاشیه */
padding: 12px 24px; /* فاصله داخلی */
border-radius: 6px; /* گوشههای گرد */
cursor: pointer; /* نشانگر موس به شکل دست */
transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
}
button:hover {
background-color: #0056b3; /* رنگ آبی تیره هنگام هاور */
}
button:focus {
outline: 3px solid #80bdff; /* خط دور با رنگ آبی روشن */
outline-offset: 2px; /* فاصله خط دور از دکمه */
}
button:disabled {
background-color: #cccccc; /* رنگ خاکستری وقتی دکمه غیرفعال است */
cursor: not-allowed; /* نشانگر موس به شکل علامت ممنوع */
}
“`
دیدگاهتان را بنویسید