সিএসএস (CSS) বাংলা টিউটোরিয়াল (পার্ট-১১)

“ফ্রী বাংলা টিউটোরিয়াল” এর CSS সম্পর্কিত টিউটোরিয়াল আশা করি আপনাদের CSS শিখতে খুব সাহায্য করছে। বন্ধুরা আজ আমরা CSS এর মাধ্যমে একটি ছবির আলো নিরোধক গুণের তারতম্য করতে এবং শেষে একটি transparent box sample এর পূর্ণ কোড দেখবো। একটি ছবির স্বচ্ছতা সরাসরি browser থেকে নিয়ন্ত্রিত হয়। অতএব এটি browser নির্ভর। বর্তমানে মজিলা ফায়ার ফক্স ব্রাউজার মোটামুটি ৭০% কম্পিউটার ব্যবহারকারীরা ইন্টারনেট ব্রাউজ করার জন্য ব্যবহার করেন। এছাড়া উইন্ডোজ এর সাথে ফ্রি পাওয়া ইন্টারনেট এক্সপ্লোরারও কম যায় না। তাই আমরা প্রথমেই ভিন্ন ভিন্ন ভাবে এই দুটি ভিন্ন ব্রাউজারের জন্য প্রয়োজনীয় কোড দেখবো কি করার জন্য একই ইমেজে ভিন্ন transparency সেট করার জন্য।
Internet Explorer এর জন্যঃ

<title>Free Bangla Tutorial</title>
<style>
img.myimage1{
position:absolute;
margin-left:300px;
width:300px;
height:400px;
}
img.myimage2{
position:absolute;
margin-top:50px;
margin-left:350px;
width:300px;
height:400px;
filter:alpha(opacity=60); [এখানেই কারসাজি opacity এর মান এক থেকে একশত হয়। যত কম তত transparent]
}
</style>
</head>
<body>
<img src="sample.jpg"/>
<img src="header.jpg"/>
</body>

<title>Free Bangla Tutorial</title>

</head>

<body>

</body>

ফলে sample.jpg ছবিটির উপরে header.jpg ছবিটি একটু উপরে ও বামে সরে অবস্থান নিবে। কিন্তু নিচের sample.jpg ছবিটি দেখা যাবে। প্রয়োজনে ইন্টারনেট এক্সপ্লোরারের active-x control run accept করতে হবে।

Mozilla FireFox এর জন্য:

<title>Free Bangla Tutorial</title>
<style>
img.myimage1{
position:absolute;
margin-left:300px;
width:300px;
height:400px;
}
img.myimage2{
position:absolute;
margin-top:50px;
margin-left:350px;
width:300px;
height:400px;
-moz-opacity:0.6; [এখানেই কারসাজি এর মান শূন্য থেকে এক হতে পারে]
opacity:0.6;[CSS3 এর স্টাইল]
}
</style>
</head>
<body>
<img src="sample.jpg"/>
<img src="header.jpg"/>
</body>

<title>Free Bangla Tutorial</title>

</head>

<body>

</body>

এই অপাসিটির মান ভিন্ন করে আপনি চাইলে একটি স্বচ্ছ টেক্সট বক্স তৈরি করতে পারেন। নিচে একটি সম্পূর্ণ কোড দেওয়া হলঃ

<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(fla_01.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body><div>
<div>
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>

<html>

<head>

</head>

<div>

<p>This is some text that is placed in the transparent box.

This is some text that is placed in the transparent box.

</p>

</div>

</body>

</html>

সিএসএস (CSS) বাংলা টিউটোরিয়াল (পার্ট-১১)

Share to:

একটি মন্তব্য পোস্ট করুন Blogger Facebook

জনপ্রিয়

মন্তব্য

আর্কাইভ

সিএসএস (CSS) বাংলা টিউটোরিয়াল (পার্ট-১১)

Share to:

Next

নবীনতর পোস্ট

Previous

পুরাতন পোস্ট

একটি মন্তব্য পোস্ট করুন Blogger Facebook