নতুনদের জন্য সিএসএস ৩ এর সাতটি টেকনিক

সিএসএস আসলে ক্যাস্কেডিং স্টাইল শিটের সংক্ষিপ্ত রূপ। ওয়েবসাইট সাজাতে সিএসএসের ব্যবহার অত্যন্ত গুরুত্বপূর্ণ। এখানে আমরা সিএসএসের সর্বাধুনিক সংস্করণ সিএসএস ৩ এর সাতটি টেকনিক নিয়ে আলোচনা করবো যা আপনার ওয়েব অ্যাপ্লিকেশনকে সাজাতে সহায়ক হবে। তাহলে চলুন শুরু করা যাকঃ

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

এজন্য প্রথমেই একটি নোটপ্যাড খুলো ও নিচের কোডগুলো তাতে লিপিবদ্ধ করোঃ

<!doctype html>
<h1>This is My Heading</h1>
</html>

<!doctype html> হচ্ছে এইচটিএমএল ডকুমেন্টের আন্তর্জাতিক ঘোষণা, যা দিয়ে ব্রাউজারগুলো এইচটিএমএল ডকুমেন্টকে চিনে নিতে পারে। <html> ট্যাগ হচ্ছে এইচটিএমএল ডকুমেন্টের মূল ট্যাগ যার নিচে অন্যান্য এইচটিএমএল ট্যাগগুলো শৃঙ্খলিতভাবে সাজানো থাকে।

এবার, এই টেক্সট ডকুমেন্টটিকে এইচ টি এম এল ডকুমেন্ট হিসেবে সেভ করুন। একটি এইচটিএমএল ডকুমেন্টে সিএসএস সাধারনত তিনভাবে ব্যবহার করা যায়।

  • এক্সটারনাল,
  • ইন্টারনাল ও
  • ইনলাইন পদ্ধতি।

ইনলাইন পদ্ধতিঃ এবার ধরুন, আমরা বর্তমান ডকুমেন্টের হেডিংয়ের কালার বা রঙ পরিবর্তন করে লাল রঙ ব্যবহার করতে চাই। এখানে আমরা সিএসএস এর ইনলাইন পদ্ধতি ব্যবহার করবো। ধরুন, h1 আমাদের সিলেক্টর। কারণ, h1 দিয়ে হেডিংক বর্ণনা করা হয়েছে। আমরা h1 এর সাথে style এট্রিবিঊট ব্যবহার করবো ও এট্রিবিঊটের ভ্যালু হিসেবে color:red ব্যবহার করবো।

<h1 style="color:red;">This is My Heading.</h1>

এবার সেভ করে ডকুমেণ্টটিকে ব্রাঊজারে খুললেই দেখতে পাবো হেডিং এর কালার পরিবর্তন হয়ে গিয়েছে।

ইন্টারনাল পদ্ধতিঃ ইন্টারনাল পদ্ধতি হচ্ছে সিএসএস স্টাইল ট্যাগের মাধ্যমে এইচটিএমএলের মূল ডকুমেন্টের ভিতরেই সিএসএসের ব্যবহার।

ইণ্টারনাল পদ্ধতিতে বর্ডার রেডিয়াসের ব্যবহারঃ ইন্টারনাল পদ্ধতিতে সিএসএস কোডগুলো সাধারণত এইচটিএমএল ডকুমেন্টের ভিতরেই থাকে। এক্ষেত্রে <head> নামের একটি ট্যাগের ভিতর <style> ট্যাগের মাধ্যমে সিএসএস এট্রিবিঊটস ও ভ্যালুগুলো সংরক্ষণ করা হয়। এই <head> ট্যাগের মধ্যস্থিত কোডগুলো সাধারণত মূল ডকুমেন্টে অদৃশ্য থাকে এবং ওয়েবসাইটের আকার, গঠন, অন্য ডকুমেন্টের সাথে লিঙ্ক তৈরী এসব নিয়ন্ত্রণ করে থাকে। যাই হোক চলুন আমরা পুরাতন কোডগুলো মুছে এইচটিএমএল ডকুমেন্টে এই নতুন কোডগুলো কপি করে সেভ করি।

<!DOCTYPE html>
<html>
<head>
<style> 
#border-radius{
    border: 2px solid #79b538;
    padding: 10px 40px; 
    background: #79b538;
    width: 300px;
    border-radius: 15px;
    font-size: 25px;
    color: #fff;
    text-align: center;  
}
</style>
</head>
<body>
<div id="border-radius">The border-radius property is a wonderful css3 techniques that allow you to add visible rounded corners.</div>
</body>
</html>

এখানে, সিএসএস সিলেক্টর হিসেবে <div> ট্যাগ ব্যবহার করা হয়েছে। এই ট্যাগে আবার দুই ধরনের এট্রিবিঊট ব্যবহার হয়ে থাকে id ও class id দিয়ে স্বাধীন div ট্যাগকে বুঝানো হয় ও class দিয়ে id এর অধীনস্থ div ট্যাগকে বুঝানো হয়। সিলেক্টর হিসেবে ব্যবহার করতে id এর ক্ষেত্রে (#) চিহ্ন ও class এর ক্ষেত্রে (.) চিহ্ন দিয়ে বুঝানো হয়ে থাকে।

উপরের ডকুমেণ্টটি সেভ করলে দেখা যাবে নির্দিষ্ট লেখাটি একটি চৌকোণা বক্সের ভিতর যার চারদিক গোলানো। এই গোলাকৃতির শেপটিকেই বর্ডার রেডিয়াস বলে।

#border-radius {
	border: 2px solid #79b538;
	padding: 10px 40px;
	background: #79b538;
	width: 300px;
	border-radius: 15px;
	font-size: 25px;
	color: #fff;
	text-align: center;
}

ডিভিশন আই ডি বর্ডার রেডিয়াসের ভ্যালুগুলো নিচে ব্যাখ্যা করা হলো।

border: 2px solid #79b538; এটা দিয়ে এইচটিএমএল এলিমেণ্টের চারপাশে বর্ডার দেয়া হয়েছে যা ২ পিক্সেল বিস্তৃত ও রঙ হচ্ছে সলিড #79b538 বা টিয়া কালার।

padding: 10px 40px; এটা দিয়ে এইচটিএমএল ডিভিশনের লেখাটি থেকে বর্ডারের দূরত্ব নির্ণয় করা হয়েছে।

background: #79b538; এটা দিয়ে এইচটিএমএল ডিভিশনের ব্যাকগ্রাঊন্ড কালার নির্ণয় করা হয়েছে।

width: 300px; এটা দিয়ে এইচটিএমএল ডিভিশনের পাশ বা বিস্তৃতি নির্ণয় করা হয়েছে। স্বাভাবিকভাবে পেইজের বিস্তৃতি অনুযায়ী ডিভিশনের বিস্তৃতিও হয়ে থাকে। কিন্তু এখানে বলে দেয়া হয়েছে এলিমেন্ট টি ৩০০ পিক্সেলের বেশী বিস্তৃত হবে না।

border-radius: 15px; এটা দিয়ে ডিভিশনের বর্ডারের গোলাকৃতির পরিমাপ নির্ণয় করা হয়েছে। অর্থাৎ, বর্ডারটি ১৫ পিক্সেলের বেশী গোলাকার হবে না।

font-size: 25px; এটা দিয়ে এইচটিএমএল ডিভিশনের ফন্টের সাইজ নির্ণয় করা হয়েছে।

color: #fff; এটা দিয়ে এইচটিএমএল ডিভিশনের এলিমেণ্টের কালার নির্ণয় করা হয়েছে।

text-align: center; এটা দিয়ে এইচটিএমএল ডকুমেন্টে্র ভিতর টেক্সট বা অক্ষরের অবস্থান কোথায় হবে তা নির্ণয় করা হয়েছে। এখানে ভ্যালু হিসেবে center দেয়ার কারনে অক্ষরগুলো বক্সের একেবারে মাঝ বরাবর সমান্তরালভাবে দেখা যাচ্ছে।

এইসব সিএসএস ভ্যালুর কারনে আমরা নিচের ছবির মত ফল পেয়ে থাকিঃ

ব্যাকগ্রাঊন্ড গ্র্যাডিয়েন্ট প্রোপার্টিঃ সি এস এস ৩ এর একটি অত্যাশ্চর্য প্রোপার্টি হচ্ছে ব্যাকগ্রাউন্ড গ্র্যাডিয়েন্ট প্রোপার্টি। গ্রাডিয়েণ্ট দিয়ে সাধারণত দুটি রঙের সংমিশ্রনকে বুঝানো হয়। সাধারণত গ্র্যাডিয়েন্ট প্রোপার্টি গুলো ভিন্ন ভিন্ন ওয়েব ব্রাঊজারের জন্য ভিন্ন ভিন্ন হয়ে থাকে। যেমনঃ

মজিলা ফায়ার ফক্সের জন্যঃ  -moz-linear-gradient(green, yellow); /* For Firefox 3.6 to 15 */সাফারি ও অন্যান্য ব্রাউজারের জন্যঃ -webkit-linear-gradient(green, yellow); /* For Safari 5.1 to 6.0 */

অপেরার জন্যঃ -webkit-linear-gradient(green, yellow); /* For Safari 5.1 to 6.0 */

এবং সবার শেষে (এটা অবশ্যই সবার শেষে থাকতে হবে)সাধারন ডিক্লেরেশনঃ background: linear-gradient(green, yellow); /* Standard syntax (must be last) */

গ্রীন ও ইয়েলো দিয়ে গ্রাডিয়েন্ট বা সংমিশ্রিত কালার বা রঙ দুটি বুঝানো হয়েছে।

!DOCTYPE html>
<html>

<head>
<style>
#gradient {
    height: 200px;
    background: -webkit-linear-gradient(green, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(green, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(green, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(green, yellow); /* Standard syntax (must be last) */
}
</style>
</head>

<body>
<h3>Linear Gradient - Top to Bottom</h3>
<div id="gradient"></div>
</body>

</html>

গ্রীন ও ইয়েলো দিয়ে গ্রাডিয়েন্ট বা সংমিশ্রিত কালার বা রঙ দুটি বুঝানো হয়েছে। এর ফলে আমরা নিচের মত দেখতে ২০০ পিক্সেল লম্বা একটি ব্লক দেখতে পাই, যাতে দুটো কালারের সংমিশ্রণ খুব সুন্দরভাবে ফুটে উঠেছে।

ডান থেকে বামে ও বাম থেকে ডানে গ্রাডিয়েণ্ট ফুটিয়ে উঠাতে চাইলে নিচের কোডগুলো ব্যবহার করতে পারেন।

#gradient {
height: 200px;
background: -webkit-linear-gradient(left, green, yellow);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, green, yellow);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, green, yellow);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, green, yellow);
/* Standard syntax (must be last) */
}

 

 

 

Leave a Reply