সুবিন্যাস্ত হোভার স্টেটসহ একটি রেস্পন্সিভ প্রাইসিং টেবিল তৈরি করুন

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

এই টিউটোরিয়ালে আমরা বেশ কিছু আকর্ষণীয় হভার ইফেক্ট সহ একটি মসৃণ প্রাইসিং টেবিল তৈরি করবো। আমরা আমাদের সিএসএস পরিচ্ছন্ন রাখার জন্য লিয়া ভেরোর প্রিফিক্সফ্রি স্ক্রিপ্ট ব্যবহার করবো, একইসাথে সম্পূর্ণ লেআউটটি যাতে রেস্পন্সিভ থাকে এবং বেশকিছু ব্রেকপয়েন্টে বদলে যায় তা নিশ্চিত করবো।

মার্কআপ

নিচের ছবিতে আমরা যেই মার্কআপটি তৈরি করতে যাচ্ছি তার একটি দৃশ্যমান বিন্যাস। দেখতেই পাচ্ছেন, এতে কোনও টেবিল ব্যবহার করা হয়নি; আমরা সর্বাধিক নমনীয়তা/ফ্লেক্সিবিলিটি এবং প্রতিক্রিয়াশীলতা/ রেস্পন্সিভনেসের জন্য আনঅর্ডারেড লিস্ট ব্যবহার করেছি।

HTML মার্কআপ

কোনও কিছু করার আগে, আমাদেরকে প্রথমে একটি খালি ডকুমেন্ট দিয়ে শুরু করতে হবে। এখানে সর্বাধিক গুরুত্বপূর্ণ হচ্ছে ভিউপোর্ট মেটা ট্যাগ যা সবধরনের ডিভাইসে সঠিকভাবে আমাদের রেস্পন্সিভ লেআউটটি প্রদর্শন করবে।

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

</body>
</html>

এখন আমরা আমাদের টেবিল মার্কআপটি (অথবা লিস্ট মার্কআপও বলা যায়) দৃশ্যমান করবো:

<ul class="pricing_table">
	<li>...</li>
	
	<li class="price_block">
		<h3>Basic</h3>
		<div class="price">
			<div class="price_figure">
				<span class="price_number">$9.99</span>
				<span class="price_tenure">per month</span>
			</div>
		</div>
		<ul class="features">
			<li>2GB Storage</li>
			<li>5 Clients</li>
			<li>10 Active Projects</li>
			<li>10 Colors</li>
			<li>Free Goodies</li>
			<li>24/7 Email support</li>
		</ul>
		<div class="footer">
			<a href="#" class="action_button">Buy Now</a>
		</div>
	</li>
	
	<li>...</li>
	<li>...</li>
</ul>

<script src="prefixfree.min.js" type="text/javascript"></script>

একেবারে নিচে আমরা প্রিফিক্সফ্রি অন্তর্ভুক্ত করবো (যা শেষের </body> ট্যাগের ঠিক আগে হবে), ফলে ডকুমেন্টের সব জায়গায় আনপ্রিফিক্সড সিএসএস ব্যবহার করা সহজ হয়ে যাবে। এটা এমনভাবে পর্দার পেছন থেকে কাজ করবে যা সিএসএস এর সাথে সংশ্লিষ্ট ব্রাউজার অনুযায়ী প্রয়োজন অনুসারে স্বয়ংক্রিয়ভাবে প্রিফিক্স যুক্ত করবে।

স্টাইল

মার্কআপ সাজানো হয়ে গেলে, এবার চলুন কিছু স্টাইল যুক্ত করি। আমি এটা ডকুমেন্টের হেডে <style> ট্যাগের মাধ্যমে করবো, কিন্তু আপনি চাইলে এজন্য একটি আলাদা স্টাইলশিট ব্যবহার করতে পারেন।

১। বেসিক স্টাইলসমূহ

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

* {
	margin: 0; 
	padding: 0;
}
		
body {
	font-family: Ubuntu, arial, verdana;
}

শুরুতে, আমরা একটি বেসিক সিএসএস রিসেট এবং কাস্টম ফন্ট 'উবান্টু' ব্যবহার করবো যা গুগল ফণ্ট থেকে ব্যবহার করা যায়।

২। প্রাইসিং টেবিল এবং প্রাইস ব্লকসমূহ

.pricing_table {
	line-height: 150%; 
	font-size: 12px; 
	margin: 0 auto; 
	width: 75%; 
	max-width: 800px; 
	padding-top: 10px;
	margin-top: 100px;
}

.price_block {
	width: 100%; 
	color: #fff; 
	float: left; 
	list-style-type: none; 
	transition: all 0.25s; 
	position: relative; 
	box-sizing: border-box;
	
	margin-bottom: 10px; 
	border-bottom: 1px solid transparent; 
}

.pricing_table টি ৭৫% প্রশস্ত হবে, কিন্তু 800px এর মধ্যে সীমাবদ্ধ থাকবে। এটা প্রশস্ত স্ক্রিনে খুব বেশী জায়গা নিবে না।

আমরা প্রথমেই মোবাইলের কথা চিন্তা করেছি, যদিও .price_block ডিফল্ট হিসেবেই ১০০% প্রশস্ত তাই এটা সম্পূর্ণ জায়গা জুড়েই থাকবে। পরবর্তীতে আমরা মিডিয়া কুয়েরি ব্যবহার করবো যাতে এটা বিস্তৃত স্ক্রিনে আরও ব্লকের জন্য জায়গা করে দিতে পারে।

.pricing_block এর নিচের 10px মার্জিনটি তখনই কাজে লাগবে যখন কোনও ব্যবহারকারী ছোট স্ক্রিনে প্রাইসিং টেবিলটি দেখবে, বিশেষ করে যখন কিছু প্রাইসিং ব্লক একটি অপরটির উপর সারিবদ্ধভাবে দেখা যাবে। এটা .price_title এর নিচের দিকে একটি স্বয়ংক্রিয় 10px ঋণাত্মক মার্জিন হিসেবে কাজ করবে। পরবর্তী সেকশনে আপনি 10px নেগেটিভ মার্জিন সম্পর্কে আরো জানতে পারবেন।

.Pricing_block এর 1px স্বচ্ছ বর্ডারটি এমন একটি গাটার বা ফাঁকা স্থান তৈরি করবে যা কন্টেন্টের বিভিন্ন ব্লকগুলোকে আলাদা রাখতে সাহায্য করবে।

এছাড়াও .price_block এর position: relative; রাখতে হবে তাহলে যখন হোভার ইফেক্টের জন্য বক্স শ্যাডোর প্রয়োগ করা হবে, তখন যাতে নিকটস্থ এলিমেন্টের একেবারে উপরে হভার হওয়া ব্লকটি দেখানোর জন্য z-index ব্যবহার করা যায়।

৩। প্রাইস হেডসমূহ

.pricing_table h3 {
	text-transform: uppercase; 
	padding: 5px 0; 
	background: #333; 
	margin: -10px 0 1px 0;
}

প্রাইস হেডের উপর -10px মার্জিন থাকবে। ফলে .price_block এর কন্টেণ্টগুলো কিছুটা উপরের দিকে সরে যাবে, তাহলে এগুলো শ্যাডোর উপরের দিকে দেখা যাবে, যা দেখলে মনে হবে উপরের দিক থেকে আলোকিত।

৪। প্রাইস ট্যাগসমূহ

এবার মূল সেকশন স্টাইল করবো যেখানে আসলে প্রাইসিং ডিটেইলস প্রদর্শন করা হবে।

.price {
	display: table; 
	background: #444; 
	width: 100%; 
	height: 70px; 
}
.price_figure {
	font-size: 24px; 
	text-transform: uppercase; 
	vertical-align: middle; 
	display: table-cell;
}
.price_number {
	font-weight: bold; 
	display: block;
}
.price_tenure {
	font-size: 11px; 
}

এখানে উল্লেখ্য একটি বিষয় হলো প্রাইস ট্যাগসমূহ লম্বালম্বিভাবে ঠিক মাঝামাঝি অবস্থানে থাকবে। এটা এমন সব প্রাইস এর ক্ষেত্রে দরকার হতে পারে যাতে কোনো টাকার অঙ্ক থাকবে না। (যেমন, বিনামূল্যে)।

.price এর ক্ষেত্রে বসানো হবে display: table; এবং এটা হচ্ছে price_figure এই ঠিক পরের চাইল্ড এলিমেন্ট যাতে display: table-cell; এবং vertical align: middle; বসিয়ে এই ইফেক্ট অর্জন করা যাবে।

.price_figure টি .price_number ও .price tenure এর কনটেইনার হিসেবে কাজ করবে, যাতে এগুলো লম্বালম্বিভাবে মাঝখানে একই সারিতে একক ইউনিট হিসেবে থাকে।

৫। ফিচারসমূহ

.features {
	background: #DEF0F4; 
	color: #000;
}
.features li {
	padding: 8px 15px;
	border-bottom: 1px solid #ccc; 
	font-size: 11px; 
	list-style-type: none;
}

৬। ফুটার এবং অ্যাকশন বাটন

.footer {
	padding: 15px; 
	background: #DEF0F4;
}
.action_button {
	text-decoration: none; 
	color: #fff; 
	font-weight: bold; 
	border-radius: 5px; 
	background: linear-gradient(#666, #333); 
	padding: 5px 20px; 
	font-size: 11px; 
	text-transform: uppercase;
}

৭। হোভার ইফেক্ট

.price_block:hover {
	box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); 
	transform: scale(1.04) translateY(-5px); 
	z-index: 1; 
	border-bottom: 0 none;
}
.price_block:hover .price {
	background:linear-gradient(#DB7224, #F9B84A); 
	box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
	background: #222;
}
.price_block:hover .action_button {
	background: linear-gradient(#F9B84A, #DB7224); 
}

এখানে হোভার ইফেক্ট এর তিনটি দিক আছে:

রং পরিবর্তন - .price এবং .action_button এর জন্য ব্যাকগ্রাউণ্ড কালার গাঢ় ধূসর থেকে হলদে কমলা গ্রেডিয়েন্টে রূপান্তরিত হবে। এছাড়াও .price কালার ইফেক্ট উন্নত করার জন্য ইনসেটে কমলা শ্যাডো ব্যবহার করা হবে।
শ্যাডো - একটি বেসিক 5px ঈষৎ সচ্ছ শ্যাডো বা ছায়া।
css3 ট্রান্সফরম ব্যবহার করে আপওয়ার্ড শিফট এবং স্ক্যালিং - .price_block এর উপর মাউস নিয়ে গেলে তা 104% বৃদ্ধি পাবে এবং কিছুটা উপরের দিকে উঠে যাবে।

.price_table এ ইতিমধ্যেই CSS3 ট্রানজিশন ব্যবহার করা হয়েছে যার ফলে হোভার (মাউস নির্দিষ্ট এলিমেণ্টের উপর নিয়ে গেলে) করা হলে একটি মসৃণ এনিমেশন দেখা যায়।

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

মিডিয়া কোয়েরির সমুহ যোগ করা

এখন আমরা এই প্রাইসিং টেবিলটি রেস্পন্সিভ করতে একটি সহজ পদ্ধতি অনুসরণ করব। সেকশন গুলো ইতিমধ্যেই ফ্লুইড বা পরিবর্তনশীল কারণ এগুলোতে % এর উপর ভিত্তি করে প্রশস্ততা নির্ধারণ করা হয়েছে, তাই আমাদের যা করতে হবে তা হচ্ছে আনুভূমিকভাবে কয়টি ব্লক বিভিন্ন স্ক্রীন সাইজে দেখা যাবে তা নিয়ন্ত্রণ করা।

< 480px - একটি ব্লক দেখা যাবে (এটা হচ্ছে আমাদের ডিফল্ট মাপ)
480px - 768px - দুইটি ব্লক দেখাবে
768px+ - চারটি ব্লক দেখাবে

এই ব্রেক পয়েন্টগুলো আসলে সংজ্ঞায়িত করা হবে বাহ্যিকভাবে ডিজাইন এর সাথে কোনটি ভালো ভাবে কাজ করে তার উপর ভিত্তি করে। এবার চলুন আমাদের অন্যান্য স্টাইলের ঠিক নিচে আমরা মিডিয়া কোয়েরি যোগ করি।

@media only screen and (min-width : 480px) and (max-width : 768px) {
	.price_block {width: 50%;}
	.price_block:nth-child(odd) {border-right: 1px solid transparent;}
	.price_block:nth-child(3) {clear: both;}
	
	.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
	.price_block {width: 25%;}
	.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
	.price_block:last-child {border-right: 0 none;}
	
	.price_block:hover {border: 0 none;}
}

ভিউপোর্ট রেঞ্জ 480px - 768px পর্যন্ত আমরা প্রতিটি প্রাইসিং ব্লক 50% প্রশস্ত রেখেছি। এর ফলে এগুলো ২ সারিতে দেখা যাচ্ছে। .price_block:nth-child(3) {clear: both;} দ্বারা নিশ্চিত করা হয়েছে যে তৃতীয় ব্লকটি উপরে দুটি ব্লক থেকে আলাদা হবে, এমনকি যখন হোভার স্টেট সবকিছুর সাইজ পরিবর্তন করবে তখনও এগুলো আলাদাই থাকবে। এছাড়াও আমরা .price_block এর ডানদিকে 1px বর্ডার যুক্ত করবো যাতে বামদিক ও ডানদিকের মাঝে একটি লম্বালম্বি গাটার তৈরি হয়।

768px এবং এর উপরের স্ক্রিনের জন্য আমরা প্রতিটি ব্লকের প্রশস্ততা রাখবো ২৫% যাতে আমরা একই সারিতে চারটি ব্লক পাই। এছাড়াও আমরা সবগুলো প্রাইস ব্লকের ডান দিকে বর্ডার বসাবো, খালি শেষের ব্লকটি ছাড়া, ঠিক যেভাবে আমরা এর আগে লম্বালম্বি গাটার তৈরি করেছি।

পরিশিষ্ট

ব্যস, একটি ফ্লুইড লেআউট, কিছু সিম্পল স্টাইলিং এবং বেশ কিছু ব্রেকপয়েন্টের মাধ্যমে আমরা একটি পরিচ্ছন্ন CSS3 প্রাইসিং টেবিল তৈরি করেছি। আমি আশা করি আপনি এটা ব্যবহারের বিভিন্ন উপায় খুঁজে পাবেন!