সিএসএস-৩ এর মাধ্যমে বক্স-শেডো তৈরি

ড্রপ শেডো এবং ইনার শেডো এই এফেক্টগুলো আমরা ফটোশপের মাধ্যমে ইমেজ বানিয়ে ওয়েবপেজে ব্যবহার করে থাকি।  এতে করে দেখা যায় পেজ অনেক ভারি হয়ে যাচ্ছে বেশি ইমেজ ব্যবহার করলে। এসকল শেডো ইফেক্ট  CSS3 এর মাধমে দেওয়া যায়।

ডেমোতে দেখে নিতে পারেন আজকে কাজ শেষে তৈরিকৃত বক্স শেডোটি-


প্রক্রিয়াটি ধাপে ধাপে নিচে লেখা হল-
বক্স শেডোর প্রপার্টিতে value  ঠিক করে দিতে হবে

যেমন-[css] box-shadow: 3px 3px 10px 5px #000;[/css]

নিচের মত করে বক্স জেনারেট হবে


<style> ট্যাগের মধ্যে নিচে সিএসএস উপাদানগুলো লিখব।
body প্রপার্টির মধ্যে ব্যাকগ্রাউন্ড সিলেক্ট করে দিলাম

[css]body{background-color:#999;}
h3{color:#999;font:Adobe Ming Std L;font-weight:bold;}[/css]

বক্স শেডোর জন্য নিচের কোডগুলো লিখলাম
[css]body:before
{
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
#box
{
position: relative;
width: 60%;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
margin: 60px auto;
}

#box:before, #box:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

#box:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}[/css]

<body> ট্যাগের মধ্যে নিচের এইচটিএমএল উপাদান লিখলাম।

[css]<span style="color: #000000;">&lt;div id="box"&gt;&lt;h3&gt;Hello. This is CSS3 box-shadow&lt;/h3&gt;</span>
<span style="color: #000000;">This is CSS3 box-shadow&lt;/div&gt;</span>[/css]

সব কোড একসাথে লিখে নোটপ্যাডে practice.html সেভ করলে শেডো এফেক্ট পেজ ব্রাউজারে ওপেন হবে।

2 thoughts on “সিএসএস-৩ এর মাধ্যমে বক্স-শেডো তৈরি”

  1. আপনের লেখা টা খুব ভালো লাগল, আমি আমার সাইটের কন্টাক্ট পেজ আপনার এই স্টাইল দেখে করার চেষ্টা করছি। সম্পন্ন হলে অবশ্যই আপনাকে লিংক দিব। ধন্যবাদ।

Leave a Comment