خانه / آموزش CSS / بخش یازدهم- آموزش CSS Outline
پشتیبان وب سایت وردپرس
آموزش طرح کلی"

تاریخ بروزرسانی: ۲۱ بهمن ۱۳۹۷ تعداد بازدید : 14 بازدید بدون دیدگاه

بخش یازدهم- آموزش CSS Outline

قدم قبلی >< قدم بعدی
آموزش CSS Outline
آموزش طرح کلی CSS

 

CSS Outline (طرح کلی CSS)

یکoutline یا طرح کلی، خطی است که در اطراف عناصر بیرون از حاشیه ها (borders) ایجاد می شود تا عنصر “برجسته” شود.

CSS دارای ویژگی های زیر است:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

نکته: طرح کلی با حاشیه ها  متفاوت است! بر خلاف حاشیه ، طرح کلی خارج از حاشیه عنصر کشیده شده و ممکن است با سایر محتوا همپوشانی داشته باشد. همچنین، طرح کلی بخشی از ابعاد عنصر نیست؛ عرض و ارتفاع کلی عنصر توسط عرض طرح کلی تاثیر نمی پذیرد.

سبک outline

خصوصیت سبک outline، سبک طرح کلی را مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:

dotted(نقطه نقطه) – یک طرح نقطه نقطه را تعریف می کند
dashed(نقاشی شده) – یک خط نقاشی را تعریف می کند
solid(جامد) – یک طرح جامع را تعریف می کند
double(دوتایی) – یک طرح دو بعدی را تعریف می کند
groove(شیار) – یک طرح سه بعدی را تعریف می کند
ridge ()– یک خط سه بعدی ریاضی را تعریف می کند
inset ()– یک طرح سه بعدی را تعریف می کند
outset(ابتدای) – یک طرح اولیه ۳D را تعریف می کند
none(هیچ کدام) – هیچ نظری را تعریف نمی کند
hidden(پنهان) – یک طرح پنهان را تعریف می کند
مثال زیر نشان می دهد مقادیر سبک های مختلف:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

یک طرح نقطه نقطه را تعریف می کند

 

نکته: هیچ کدام از خواص طرح کلی هیچ اثری نخواهند داشت، مگر اینکه مشخصه سبک طراحی شده باشد!

رنگ outline

برای تنظیم رنگ طرح، از ویژگی outline-color استفاده می شود.

رنگ را می توان توسط عناصر زیر تعیین کرد:

name – یک نام برای رنگ مشخص کنید، مانند “red”
RGB – مقدار RGB را مشخص کنید، مانند“rgb(255,0,0)”
Hex – شماره عدد رنگ را در مبنای شانزده مشخص کنید، مانند “# ff0000”
invert – بکار بردن یک لایه رنگ معکوس (که تضمین می کند که طرح کلی قابل مشاهده است، صرف نظر از پس زمینه رنگی)
مثال زیر چند طرح کلی با رنگ های مختلف را نشان می دهد. همچنین توجه داشته باشید که این عناصر دارای حاشیه نازک سیاه و سفید درون طرح هستند:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

تنظیم رنگ طرح

 

مثال زیر از خطی رنگی به عنوان طرح کلی رنگ استفاده می کند انجام این کار تضمین می کند که طرح بدون در نظر گرفتن پس زمینه رنگ قابل مشاهده است.

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

خطی رنگی به عنوان طرح کلی رنگ

 

عرض outline

خصوصیت outline-width عرض طرح را می دهد مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:

thin (نازک،  معمولا ۱px)
medium ​​(متوسط، معمولا ۳ پیکسل)
thick (ضخیم، به طور معمول ۵px)
A specific size  (یک اندازه مشخص، در px، pt، cm، em، و غیره)
مثال زیر نشان می دهد برخی از خطوط با عرض های مختلف:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

عرض طرح

 

outline- ویژگی مختصر نویسی

خصوصیت طرح کلی یک خصوصیت قابل مختصر نویسی هست یک شرط کوتاه برای تنظیم ویژگی های زیر است:

  • outline-width
  • outline-style (required)
  • outline-color

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

مثال زیر برخی از خطوط مشخص شده با ویژگی مختصات خلاصه را نشان می دهد:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

خصوصیت قابل مختصر نویسی

 

Outline Offset

ویژگی های طرح کلی-Offset فضای بین یک طرح و لبه / حاشیه یک عنصر را اضافه می کند. فضای بین عنصر و طرح آن شفاف و غیر قابل دیدن است.

مثال زیر یک خط ۱۵px را خارج از لبه حاشیه مشخص می کند:

مثال زیر نشان می دهد که فضای بین یک عنصر و طرح آن شفاف است:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

طرح کلی-Offset

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15335


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *