سایه و خط خارجی

سایه و خط خارجی ( shadow , outline )

صفت های shadow و outline به مانند کادر، محیط جعبه های شما را سبک دهی می کنند. محیط جعبه های سند html به ترتیب از outline ، border و box-shadow تشکیل شده است.که از آن ها می توان برای زیبا سازی عناصر html استفاده کرد. همچنین از این خواص می توان برای درک محل قرارگیری عناصر html خود نیز استفاده کرد.

برای استفاده از خاصیت outline برای عناصر می توانید از صفات زیر کمک بگیرید:

outline-color                       برای تعیین رنگ خط خارجی

outline-style                       برای سبک دادن به خط خارجی

outline-width                       برای تعیین عرض خط خارجی

 

شما می توانید سایه ها را برای متن ها و عناصر html استفاده نموده و به زیبایی سایت خود بیافزایید، در زیر پارامتر های مورد استفاده در box-shadow و text-shadow را مشاهده می نمایید:

box-shadow: (میزان آفست عمودی)قرمز(رنگ)0(میزان قطر)0(میزان پراکندگی رنگ)0(میزان آفست افقی)0

text-shadow: (میزان آفست عمودی)قرمز(رنگ)0(میزان پراکندگی رنگ)0(میزان آفست افقی)0

در زیر چند مثال از سایه متن و عناصر و همچنین خط خارجی را مشاهده می نمایید:


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

html :
<p>این یک متن نمونه است</p>
style :
p{
text-shadow: -2px 5px 3px red;
box-shadow: 0 10px 21px 2px gray;
outline:dashed thin blue;
}


مـــهم از text-shadow علاوه بر متن ها برای سایه دادن به فونت آیکن ها نیز استفاده می شود.

 

صفحه بعدیصفحه قبلی

 

تاریخ آخرین بروز رسانی:2017/12/30

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

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