آموزش کار با ویژگی Outline در CSS

مقدمه

ویژگی Outline در CSS برای ایجاد یک خط بیرونی دور عناصر استفاده می‌شود. این ویژگی شباهت زیادی به Border دارد اما تفاوت‌های مهمی نیز دارد. Outline بیشتر برای نمایش حالت فوکوس، طراحی فرم‌ها و تاکید روی عناصر کاربرد دارد. برای یادگیری کامل CSS و تکنیک‌های حرفه‌ای طراحی وب، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Outline در CSS

Outline یک خط بیرونی است که خارج از Border نمایش داده می‌شود و برخلاف Border در اندازه واقعی عنصر تاثیری ندارد.

خصوصیات اصلی Outline:

• outline-width → ضخامت خط
• outline-style → نوع خط
• outline-color → رنگ خط
• outline → شورت‌هند برای همه خصوصیات
• outline-offset → فاصله خط از عنصر

مثال عملی با کد

تعریف Outline ساده:

div {
  outline: 3px solid red;
}

تنظیم جداگانه خصوصیات:

.box {
  outline-width: 4px;
  outline-style: dashed;
  outline-color: blue;
}

تنظیم فاصله از عنصر:

.card {
  outline: 2px solid black;
  outline-offset: 10px;
}

کاربرد در فوکوس فرم:

input:focus {
  outline: 3px solid green;
}

نکات مهم و توضیحات تکمیلی

• Outline بر اندازه عنصر تاثیر نمی‌گذارد.
• می‌توان آن را برای نمایش حالت Focus استفاده کرد.
• برخلاف Border، Outline فقط به صورت یکپارچه نمایش داده می‌شود.
• در طراحی Responsive برای تعامل کاربر بسیار کاربردی است.

ادامه آموزش CSS

برای یادگیری کامل استایل‌دهی متن، فونت‌ها و طراحی حرفه‌ای رابط کاربری، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.