আমরা পোর্টফোলিও সহ বিভিন্ন ধরণের ওয়েব সাইটে ইমেজ গ্যালারি দেখে থাকি। এ
সব ইমেজ গ্যালারিতে বিধিন্ন ইফেক্ট, এনিমেশন ইত্যাদির মাধ্যমে ইমেজকে
উপস্থাপনা করা হয়। এ কাজের জন্য সচরাচর ফ্লাশে তৈরি এনিমেশন ব্যবহার করা হয়
অথবা জাভাস্ক্রিপ্ট, জেকোয়েরির মত জটিল
প্রোগ্রামিং কোড ব্যবহার করা হয়। আজ আমরা শুধুমাত্র সহজ HTML এবং CSS
ব্যবহার করে একটা আকর্ষণীয় ইমেজ গ্যালারি তৈরি করা যায় তা দেখব।
একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….
একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…………….
প্রয়োজনীয় HTML কোড
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Image Gallery</title>
</head>
<body>
<div>
<img src=”images/image1.png” />
<img src=”images/image2.png” />
<img src=”images/image3.png” />
<img src=”images/image4.png” />
<img src=”images/image5.png” />
<img src=”images/image6.png” />
</div>
</body>
</html>
প্রয়োজনীয় CSS কোড
.hovergallery img{width:150px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.7;margin: 50px 15px 0px 30px ;}.hovergallery img:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity: 1;}
কার্যপদ্ধতি
প্রথমে একটা Notepad Open করে উপরের HTML
Code টুকু লিখুন। HTML Code এর <head></head> এর মাঝখানে কোন
অংশে <style></style> ট্যাগ যুক্ত করে এর মাঝে CSS Code টুকু
লিখুন। File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা
home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে All files
সিলেক্ট করে এরপর Save বাটনে ক্লিক করে Save করুন। এখন একটা নতুন Folder
তৈরি করে নাম দিন Gallery এবং এর মধ্যে index.html ফাইলটাকে রাখুন এবং নতুন
আর একটা Folder তৈরি করে নাম দিন images । images Folder এর মধ্যে
প্রয়োজণীয় PNG ইমেজ গুলোকে যথাক্রমে image1.png, image2.png, image3.png,
image4.png, image5.png, image6.png নামে Save করুন। এখন Mozila দিয়ে
index.html open করলে ইমেজ গ্যালারী তৈরি হয়ে যাবে। 
No comments:
Post a Comment