সিএসএস ৩ এর সাহায্যে তুমি গোলআকৃতির বর্ডার তৈরি করতে পারবা, এবং বক্স এ ছায়া দিতে পারবা, এবং যেকোন ইমেজ কে বর্ডার করতে পারবা ফটোশপ অথবা অন্য যে কোন ধরনের ডিজাইন প্রোগ্রাম ছাড়াই।

এই অংশে আমরা শিখব বর্ডার এর প্রপার্টিজ এর কিছু বিষয় সম্পর্কেঃ

• বর্ডার – রেডিয়াস
• বক্স – ছায়া
• বর্ডার – ইমেজ

এই কাজ গুল প্রায় সব ওয়েব ব্রাওজার দিয়েই করা যায়।

সিএসএস ৩ বর্ডার – রেডিয়াস প্রপার্টি- গোলাকার কোনা

সিএসএস ২ তে গোলাকার কোনা তৈরি করা অনেক কষ্টের ছিল । আমাদেরকে প্রতিটা কোনার জন্য ভিন্ন ভিন্ন ইমেজ ব্যবহার করতে হতো।
এখন সিএসএস ৩ তে গোলাকার কোনা তৈরি করা অনেক সহজ । সিএসএস ৩ তে border-radius প্রোপার্টি ব্যবহার করা হয় গোলাকার কোনা তৈরি করার জন্য ।

উদারন সরুপ

একটা <div> এর ভিতর গোলাকার ইলিমেন্ট লেখার জন্য

 div {
     border: 3px solid;
     border-radius: 30px;
 }

div {
     box-shadow: 20px 12px 6px #888888;
 }

div {
     -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
     -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
     border-image: url(border.png) 30 30 round;
 }

সিএসএস সিলেক্টর টিউটোরিয়াল

সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। বিভিন্ন ধরনের সিলেক্টর আছে, এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়। সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে। সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমনঃ

১। এইচটিএমএল এলিমেন্ট
২। এট্রিবিউট

রুল সেট বা রুল (css rule)

Selector আর declaration block দুটি মিলে একটা রুল। অর্থ্যাৎ কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট করে সেটার জন্য যেসব সিএসএস লেখা হয় তা হচ্ছে একটা রুল।

পুরো সিএসএস টিউটোরিয়াল জুড়ে শুধু মুলত ৩টি জিনিসের আলোচনা হবেঃ

সিলেক্টর : কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট বা টার্গেট করে সেটার জন্য সিএসএস রুল লেখা হয়। এলিমেন্টে id, class এট্রিবিউটের যে মান দেয়া থাকে সেটা দিয়েই সিলেক্ট/টার্গেট করা যায়।

প্রেপার্টি : সিএসএস এ শত শত প্রোপার্টি আছে। এক একটি দিয়ে এক এক কাজ হয় যেমন “background-color” প্রোপার্টি দিয়ে কোন এলিমেন্টের ব্যাকগ্রাউন্ডে রং দেয়া যায়। “font-family” দিয়ে এলিমেন্ট টির ফন্ট কি হবে সেটা ঠিক করা যায় ইত্যাদি।

মান (value) : প্রত্যেকটি প্রোপার্টির নির্দিষ্ট মান আছে। এই প্রোপার্টি এবং প্রোপার্টিগুলির মান কি কি হবে সেগুলি যত বেশি মুখস্থ থাকবে তত ভাল কাজ করতে পারবেন। তবে কাজ করে করে প্রফেশনাল হয়ে গেলে শত শত প্রোপার্টি এবং এদের মানগুলি মুখস্থই থাকে।

01.h4
02.{
03.background-color:white;
04.font-size:12px;
05.}
06.p
07.{
08.color:red;
09.}

এখানে h4, p এসব হচ্ছে সিলেক্টর, h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4> এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।
h4 এর পর সেকেন্ড ব্রাকেট যেখান থেকে শুরু হয়েছে এবং p এর আগে যেখানে সেকেন্ড ব্রাকেট শেষ হয়েছে এইটুকু ডিক্লেয়ারেশন ব্লক।
সেকেন্ড ব্রাকেটের ভিতরে সবটুকু হচ্ছে ডিক্লেয়ারেশন।
background-color হচ্ছে প্রোপার্টি এবং white হচ্ছে এর ভ্যালু।
আর পুরোটা অর্থ্যাৎ h4 থেকে শুরু করে এর সেকেন্ড ব্রাকেট যেখানে শেষ হয়েছে এইটুকু রুল বা রুল সেট। উপরের কোডে দুটি রুল আছে h4 এবং p।

নিচে বিভিন্ন সিলেক্টর এর নাম এবং এরা কিভাবে কাজ করে তা দেয়া হলঃ

১। ইউনিভার্সাল সিলেক্টর

ইউনিভার্সাল সিলেক্টর এইচটিএমএল পেজের প্রতিটি এলিমেন্ট কে সিলেক্ট করে। যেমনঃ নিচের কোডটি সব এইচটিএমএল এলিমেন্ট এর রং লাল করে দেবে।

1.* {color:red;}

অনেকে padding, margin এখানে 0 করে দেন যেমনঃ

1.*{
2.margin:0;
3.padding:0;
4.}

এই কাজটি করা অপ্রোয়জনীয়, এতে ব্রাউজারের উপর চাপ বেশি পরে তাই অনেকে এটা করতে নিষেধ করেন।

২। টাইপ সিলেক্টরঃ

1.p{
2.background-color:orange;
3.}
4.a{
5.color:maroon;
6.}

p, a হচ্ছে এখানে টাইপ সিলেক্টর। p সিলেক্টর এইচটিএমএল পেজের সব এলিমেন্ট কে সিলেক্ট করবে এবং এদের ব্যাকগ্রাউন্ড রং কমলা করে দেবে আর a সিলেক্টর এইচটিএমএল সব লিংক কে সিলেক্ট করে রং খয়েরি করে দেবে।

অঞ্জন দাস (American international univetsity)

আপাসিটি দ্বারা নিধারণ করা হয় অবজেক্টটি কতটা স্বচ্ছ। সাধারণত কোন ইমেজের অপাসিটি নিয়ন্ত্রণের মাধ্যমে ঐ ইমেজের উপর বিভিন্ন ইফেক্ট দেয়া যায়।

CSS এর মাধ্যমে সহজে স্বচ্ছ ইমেজ তৈরি করা। CSS এর অস্বচ্ছতা (Opacity) CSS 3 এর একটি একটি অংশ।

উদাহরণ 1 – একটি স্বচ্ছ ইমেজ তৈরি করাঃ

CSS 3 বৈশিষ্ট্য হল এর স্বচ্ছতা ও অস্বচ্ছতা। প্রথম আমরা কিভাবে CSS এর সঙ্গে একটি স্বচ্ছ ইমেজ তৈরি করতে হয় তা দেখব ।
নিয়মিত চিত্র:

Transparency তে একই চিত্র:

উদাহরণঃ

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

অপাসিটি নিয়ন্ত্রণের জন্য CSS এ ইন্টারনেট এক্সপ্লোরার-৯, ফায়ারফক্স, ক্রোম, অপেরা এবং সাফারি সহ নতুন সকল ব্যাউজারের জন্য opacity প্রোপার্টি ব্যবহৃত হয়। opacity প্রোপার্টি র মান 0.0 থেকে 1.0 গ্রহণ করতে পারে। IE8 এবং তার আগের ব্যাউজার filter:alpha(opacity=x) ব্যবহার করে। এর নিম্ন মান উপাদান আরো স্বচ্ছ করে তোলে।

উদাহরণ 2 – চিত্র ট্রান্সপারেন্সি এর হভার (Hover) প্রভাব

ইমেজ এর উপর মাউস রাখেন
উদাহরণঃ

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

এটি প্রথম CSS ব্লক উদাহরণ ১ এর অনুরূপ কোড। উপরন্তু, আমরা যখন ইমেজ এ hover ওভার asযোগ করবো। এই ক্ষেত্রে যদি স্বচ্ছ ইমেজ না চান তাহলে hover over রেখে দেখুন।
এই জন্য সিএসএস হল: opacity=1
IE8 এবং আগের জন্য filter:alpha(opacity=100)
যখন মাউস পয়েন্টার ইমেজ থেকে দূরে চলে আসে, তখন ইমেজ আবার স্বচ্ছ হতে পারে।

উদাহরণ 3 – Transparent বক্স-এর লেখাটি

উদাহরণঃ

 <html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

প্রথমত, আমরা <div> element (class=”background”) এর সাথে একটি ব্যাকগ্রাউন্ড ইমেজ এবং একটি পার্শ্ব তৈরি করবো। তারপর আমরা <div> (class=”transbox”) তৈরি করবো । যার পাশে <div>. The <div class=”transbox”> এ আগের পটভূমির রঙ এবং একটি স্বচ্ছ DIV সীমানা (bbBBBGGH4141444 border)rderr আছে। ভিতরের transparent <div> এ আমরা একটি <p> উপাদান ভিতরে কিছু লেখা যোগ করবো।