آموزش Shadow در CSS و نحوه سایه دهی به عناصر با text-shadow و box-shadow

شما با استفاده از Shadow در CSS می توانید به متن و باکس ها سایه اضافه کنید. ما در این مقاله قصد داریم خواص text-shadow و box-shadow را به طور کامل آموزش دهیم، همراه داتیس نتورک باشید.

Shadow در CSS

سایه (به انگلیسی shadow) از گذشته با به امروز در طرح‌های گرافیکی نقش مهمی داشته و دارد. حتی در زمانی که طرح‌های تخت (flat) مد شده بود، طولی نکشید که طرح‌های فِلَت سایه‌‌دار (با سایه‌های بسیار کشیده و کم رنگ) جای طرح‌های فلت را گرفت.

در زبان CSS می‌توان افکت سایه را به عناصر مختلف، باکس ها و متن ها اعمال کرد. برای ایجاد افکت سایه و اعمال آن، 2 ویژگی مختلف در CSS وجود دارد:

• text-shadow
• box-shadow

text-shadow 

ویژگی text-shadow در CSS، سایه را به متن اعمال می کند.

یکی از ساده ترین کاربرد آن، شما فقط سایه افقی (2px) و سایه عمودی (2px) را مشخص می کنید.

مثال:

h1 {
text-shadow: 2px 2px;
}

حتی ما می توانیم یک رنگ به سایه اضافه کنیم.

مثال:

h1 {
text-shadow: 2px 2px red;
}

و یکی دیگر از قابلیت های Shadow در CSS تار و یا به زبان ساده تر مات کنید.

مثال:

h1 {
text-shadow: 2px 2px 5px red;
}

در مثال زیر شما می توانید یک متن سفید با سایه سیاه را مشاهده کنید.

مثال:

 h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

شما در مثال زیر سایه براق نئونی قرمز را می توانید مشاهده کنید.

مثال: 

 h1 {
text-shadow: 0 0 3px #FF0000;
}

Box Shadow

ویژگی CSS box-shadow سایه را به باکس ها اعمال می کند.

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

مثال:

p {
box-shadow: 10px 10px;
}

در اینجا هم مانند ویژگی text-shadow ما می توانیم یک رنگ به سایه اضافه کنیم.

مثال:

p {
box-shadow: 10px 10px grey;
}

حتی مانند ویژگی قبلی می توانیم اثر تاری را اضافه کنیم.

مثال:

p {
box-shadow: 10px 10px 5px grey;
}

Card ها در Box Shadow

همچنین می توانید از ویژگی box-shadow برای ایجاد کارتهایی مانند کاغذ استفاده کنید.

مثال:

p.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

امیدوارم این مقاله برایتان مفید بوده باشد.

داتیس نتورک را در شبکه های اجتماعی دنبال کنید.