সিএসএস(৩) box-shadow প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| box-shadow | ১০.০ ৪.০ -webkit- |
৯.০ | ৪.০ ৩.৫ -moz- |
৫.১ ৩.১ -webkit- |
১০.৫ |
সংজ্ঞা ও ব্যবহার
একটি এলিমেন্টে এক বা একাধিক স্যাডো যুক্ত করতে box-shadow প্রোপার্টিটি ব্যবহার করা হয়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
box-shadow: none/h-shadow v-shadow blur spread color /inset/initial/inherit;
পরামর্শঃ
- box-shadow প্রোপার্টি একটি এলিমেন্টে এক বা একাধিক স্যাডো যুক্ত করে। স্যাডোর প্রোপার্টিগুলো কমা দিয়ে আলাদা করা হয়। এর ২-৪ টি ভ্যালু নির্ধারন করা হয়। এদের মধ্যে ঐচ্ছিক কালার এবং ঐচ্ছিক ইনসেট কি-ওয়ার্ড থাকতে পারে। ০ হচ্ছে বর্জনকৃত দৈর্ঘ্য।
<div> এলিমেন্টের ভিতরে একটি box-shadow যুক্ত করি:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 100px;
background-color:lightblue;
box-shadow: 10px 10px 5px #880088;
}
</style>
</head>
<body>
<div>স্যাট একাডেমি</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.boxShadow="15px 25px 35px lightgreen"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#thisdiv {
position: absolute;
width: 300px;
height: 150px;
background-color: lightpink;
color:green;
}
button{background-color: lightcoral;
margin-bottom: 10px;
color:blue;}
</style>
</head>
<body>
<h2> " পরিবর্তন করি" বাটনে ক্লিক করে DIV এলিমেন্টের মধ্যে box-shadow প্রোপার্টি ব্যবহার দেখুন :</h2>
<button onclick="myFunction()"> পরিবর্তন করি</button>
<div id="thisdiv">
<h3>স্যাট একাডেমী</h3>
</div>
<script>
function myFunction() {
document.getElementById("thisdiv").style.boxShadow = "15px 25px 35px lightgreen";
}
</script>
</body>
</html>
ফলাফল
box-shadow প্রোপার্টির ভ্যালু-সমূহ
- none - ডিফল্ট ভ্যালু। কোন ছায়া প্রদর্শিত হয় না।
- h-shadow - অনুভুমিক ছায়ার অবস্থান এখানে ঋনাত্মক ভ্যালুও হতে পারে।
- v-shadow - উলম্ব ছায়ার অবস্থান এখানে ঋনাত্মক ভ্যালুও হতে পারে।
- blur -ব্লার এর দূরত্ব।
- spread - স্যাডো এর সাইজ দেখায় এখানে ঋনাত্মক ভ্যালু হতে পারে ।
- color - স্যাডো এর কালারকে নির্দেশ করে ডিফল্ট কালার এখানে কালো ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
box-shadow প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।