آموزش کار با طرح کلی outline در css

حامد محمدیحامد محمدی
169 بازدید
آموزش outline

طرح کلی outline یکی دیگر از امکانات css است. و در طراحی و زیبا سازی ظاهری سایت کاربرد دارد.

برخلاف مرز(border)،طرح کلی،بیرون از عنصری که در حال کار روی آن هستید قرار می گیرد. و امکان دارد با سایر عناصر موجود در صفحه همپوشانی داشته باشد.

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

با سلام خدمت شما همراهان گرامی سایت پرنیان طرح

در آموزش امروز،خصوصیت outline و نحوه کار با طرح کلی را آموزش خواهیم داد. طرح کلی ، فراتر از مرزها border است. تصویر زیر شما را در درک بهتر طرح کلی (outline) کمک می کند:

outline

ویژگی های طرح کلی outline

css به شما این امکان را می دهد که مقادیر زیر را برای outline تنظیم کنید:

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

outline-style

این ویژگی به شما این قدرت را می دهد که از بین انواع مختلف طرح های کلی، مورد دلخواه خود را تنظیم نمایید. این موارد عینا مانند تنظیمات سبک برای مرزها border هستند. شما میتوانید آموزش کار با مرزها border را از این لینک مشاهده کنید.

  • dotted : یک طرح نقطه نقطه ای را تعریف می کند.
  • dashed: یک طرح با خط های کوتاه تعریف میک ند.
  • solid: یک طرح شامل یک خط ممتد را تعریف می کند.
  • double: یک طرح با خط دوگانه را تعریف می کند.
  • groove ; ridge ; inset ; outset : طرح های سه بعدی را تعریف می کنند. تفاوت این طرح ها در شدت تاثیررنگ و جهت قرارگیری آن در طرح خواهد بود.
  • none: هیچ طرحی قرار نمی گیرد.
  • hidden: یک طرح پنهان تعریف می کند.

نمونه ای از طرح های بالا

نمونه های outline

 

مثالی از کدنویسی و ایحاد طرح کلی در اطراف یک متن:

ایجاد طرح کلی با سبک نقطه ای در اطراف یک متن

[php]
p.dotted {outline-style: dotted;}
[/php]

dotted

 

برای ایجاد سایر طرح ها، فقط کافیست در بخش کدهای گفته شده، طرح دلخواه خود را به جای کلمه dotted قرار دهید.

 

نمونه های outline

 

outline-color:

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

شما می توانید از طریق این لینک آموزش های سایت پرنیان را درباره رنگ ها مطالعه نمایید.

مقداردهی برای رنگ ها را می توان به سه روش انجام داد.

  • نام رنگ: کافیست نام رنگ دلخواه را  در بخش کدهای css قرار دهید.مثال:

[php]
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
[/php]

کد بالا، یک مرز با مقدار۱px ، و طرح کلی ساده تک خطی به رنگ قرمز، دور یک متن رسم خواهد کرد.

نمونه کدنویسی

 

یک ویژگی دیگر برای outline

outline-color: invert

به شما این امکان را می دهد که به جای ایجاد طرح کلی در خارج از مرز، یک طرح کلی در داخل مرز تعریف نمایید.

[php]
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
[/php]

کد بالا، طرح زیر را ایحاد خواهد کرد:

نمونه معکوس

 

outline-width

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

معمولا عرض را به یکی از سه روش زیر تعیین می کنند:

  • نازک : (thin) معمولا ۱px
  • متوسط : (medium) معمولا ۳px
  • ضخیم : (thick) معمولا ۵px

و یا با مقادیری مانند : px، pt، cm، em، و غیره

 

مثالی از کدنویسی برای تعیین عرض

ابتدا در بخش کدهای css، کد زیر را وارد کنید:

[php]
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
[/php]

کد بالا، یک طرح با مرز۱px ،به رنگ مشکی، و طرح ساده تک خطی به رنگ قرمز و عرض نازک تعریف میکند.

و سپس کدهای زیر را در بخش کدهای html وارد کنید.

[php]

در نهایت تصویر زیر ایجاد خواهد شد:

نمونه مقداردهی شده

outline-offset

این ویژگی، یک فضای خالی بین طرح کلی و مرز عنصر ایجاد می کند.مثال زیر نشان می دهد که فضای بین یک عنصر و طرح آن شفاف است.

کد زیر را در بخش css وارد کنید:
[php]
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
[/php]

این کد طرح زیر را در اطراف یک متن که شما به دلخواه خودتان نوشته اید، ایجاد می کند:

نمونه آخر

 

میخواهم بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

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

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

22+ محصولات
400+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت