تنظیم رنگ outline در CSS
در طراحی وب، outline یکی از ویژگی‌های مهم برای بهبود دسترسی و تجربه کاربری است. برخلاف border که بر روی layout تأثیر می‌گذارد، outline خارج از عنصر نمایش داده می‌شود و فضای اضافی اشغال نمی‌کند.
توجه: outline معمولاً برای نشان دادن فوکوس روی عناصر تعاملی مانند لینک‌ها و inputها استفاده می‌شود.
ویژگی outline-color
برای تنظیم رنگ outline می‌توانید از خاصیت outline-color استفاده کنید. این ویژگی به شما امکان می‌دهد رنگ outline را به صورت دقیق مشخص نمایید:
| مقدار |
توضیحات |
| نام رنگ |
مثل red، blue، green |
| کد HEX |
مثل #ff0000 |
| RGB/RGBA |
مثل rgb(255,0,0) |
| invert |
رنگ معکوس پس‌زمینه |
مثال‌های کاربردی
در اینجا چند نمونه از تنظیم رنگ outline را مشاهده می‌کنید:
- تنظیم رنگ با نام:
button { outline: 2px solid red; }
- استفاده از کد HEX:
input:focus { outline-color: #3498db; }
- تنظیم opacity با RGBA:
a:focus { outline: 3px solid rgba(46, 204, 113, 0.5); }
برای یادگیری عمیق‌تر درباره این ویژگی، می‌توانید اینجا را مشاهده نمایید.
نکات مهم در استفاده از outline
- همیشه برای عناصر تعاملی outline مناسب تعریف کنید تا کاربران صفحه‌کلید بتوانند موقعیت فعلی را تشخیص دهند
- از حذف کامل outline خودداری کنید (مگر با جایگزینی مناسب)
- رنگ outline باید با پس‌زمینه تضاد کافی داشته باشد
- در حالت focus طرح‌های خلاقانه با outline ایجاد کنید
به یاد داشته باشید که outline بخش مهمی از دسترسی پذیری وب است و حذف آن می‌تواند تجربه کاربران خاص را با مشکل مواجه کند.
