آموزش کامل box-shadow در css

هدایت عباسی آموزش CSS

آموزش کامل box-shadow در css به چندین روش مختلف و با مثال های متنوع. از دستور box-shadow می توانید به روش های مختلفی استفاده کنید که همه آنها را با ذکر توضیح خواهیم داد.

در این بخش از آموزش css از تاپ سایت 98 به بررسی دستور box-shadow می پردازیم.

دستور box-shadow در css

دستور box-shadow در css برای سایه زدن بکار می رود.

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

در مثال زیر یک باکس ایجاد کرده ایم که پس زمینه آن را با رنگ خاصی مشخص کرده ایم تا مشخص باشد.

سپس با استفاده از css به آن استایل داده ایم و با دستور box-shadow برای باکس ، سایه ای را ایجاد کرده ایم.

در این حالت ما فقط سایه افقی و سایه عمودی را مشخص کرده ایم و مقدار هر دو آن 7 پیکسل میباشد.

می توانیم ویژگی های دیگری نیز به دستور box-shadow بدهیم که در مثال های بعد آموزش خواهیم داد.

این کد را می توانید در یک فایل html ذخیره کرده و تست نمایید.

<!DOCTYPE html>
<html>
<head>
<title>TopSite98</title>
</head>
<head>
<style>
div {
width: 250px;
height: 130px;
padding: 18px;
box-shadow: 7px 7px;
background-color: orange;
}
a{
color: black;font-size: 20px;}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div>
<a href="https://topsite98.com/">Topsite98</a>
</div>
</body>
</html>

اضافه کردن رنگ

برای اضافه کردن رنگ به دستورbox-shadow می توانیم مطابق مثال زیر عمل نماییم.

در دستور box-shadow ابتدا سایه عمودی و افقی و سپس رنگ سایه را مشخص کرده ایم.

رنگ سایه در css فقط مشکی نیست و می بینید که رنگ قرمز را برای سایه مشخص کرده ایم.

کافی است این کد را جایگزین کد div در تگ style مثال اول کنید تا خروجی را مشاهده فرمایید.

پس از اجرای کد ، می بایست رنگ سایه به رنگ قرمز تغییر یابد.

div {
width: 250px;
height: 130px;
padding: 18px;
box-shadow: 7px 6px red;
background-color: orange;
}

شفاف کردن سایه

یکی دیگر از ویژگی های دستور box-shadow شفاف کردن سایه یاblur effect است.

با استفاده از ویژگی یا افکت blur می توانید سایه را شفاف تر کنید.

هر چقدر میزان شفافیت بیشتر باشد سایه بیشتر پخش می شود.

برای اینکه مفهوم این ویژگی را بیشتر درک کنید کافی است که کد div را جایگزین کد اصلی در مثال اول کنید و کد را تست نمایید.

خروجی این کد html باید یک باکس با سایه شفاف یا blur باشد.

حتما پس از تغییر کد ، آن را ذخیره کنید و سپس اجرا نمایید.

div {
width: 250px;
height: 130px;
padding: 18px;
box-shadow: 8px 8px 8px red;
background-color: orange;
}

مثال دستور box-shadow

در مثال دستور box-shadow که در زیر مشاهده می کنید یک باکس ایجاد کرده ایم و فقط سایه پایین را قرار داده ایم.

<!DOCTYPE html>
<html>
<head>
<title>TopSite98</title>
</head>
<head>
<style>
div {
width: 250px;
height: 130px;
box-shadow: 0 4px 0 0 rgba(0,0,0,0.75);
background-color: greenyellow;
}
a{color: blue;font-size: 20px;}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div>
<a href="https://topsite98.com/">Topsite98</a>
</div>
</body>
</html>

سایه دادن به border

در مثال زیر سایه دادن به border با css را آموزش خواهیم داد.

اگر یک باکس داشته باشید و بخواهید به آن border یا کادر ، سایه دهید می توانید از دستور box-shadow استفاده کنید.

این کد را در یک فایل با پسوند html ذخیره و اجرا نمایید.

نتیجه یک باکس با یک سایه دور آن خواهد بود.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 130px;
box-shadow: 0 0 0 3px rgba(0,0,0,0.75);
background-color: limegreen;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div>
<a href="https://topsite98.com/">Topsite98</a>
</div>
</body>
</html>

کدها و مثال ها تست شده میباشد .

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

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

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید