`box-shadow` প্রোপার্টি বক্সে ছায়া যোগ করে, `text-shadow` টেক্সটে ছায়া যোগ করে। উভয়ই ডেপথ এবং ভিজ্যুয়াল আপিল বেড়ায়।
উদাহরণ: বক্স ও টেক্সট শ্যাডো
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
h2 { color: rgb(28, 0, 128); text-shadow: red 2px 4px 2px; }
div { color: white; text-align: center; width: 150px; height: 150px; background-color: red; box-shadow: rgb(89, 0, 255) 8px 2px 8px; }
</style>
</head>
<body>
<h1>শ্যাডো ইফেক্ট উদাহরণ</h1>
<h2>টেক্সট শ্যাডো</h2>
<div>বক্স শ্যাডো</div>
</body>
</html>
কোড ব্যাখ্যা
- text-shadow: red 2px 4px 2px: X-offset=2px, Y-offset=4px, blur=2px, color=red।
- box-shadow: rgb(89,0,255) 8px 2px 8px: X=8px, Y=2px, blur=8px, color=পার্পল।
- বহু শ্যাডো: কমা দিয়ে একাধিক শ্যাডো যোগ করা যায়।
সিনট্যাক্স
`box-shadow: h-offset v-offset blur spread color inset;` — `inset` দিয়ে ভেতরের শ্যাডো।