সহজেই বানিয়ে ফেলি ছবির গ্যালারী: সিএসএস (CSS) টিউটরিয়াল-৬

আজ আমরা একটি ছবির গ্যালারী তৈরীর কাজে হাত দিব। টিউটরিয়ালের স্বার্থে সহজ সরল একটি প্রজেক্ট বানাবো। অবশ্য এই কাজটি করতে হলে যতটা CSS ও HTML জ্ঞান থাকা দরকার তা আহোরন করে হাত দেয়া উচিত। আমাদের CSS ও HTML টিউটরিয়ালগুলো অনুসরনের মাধ্যমে কাজটি সহজ হবে।
আসলে টিউটরিয়ালটি sonspring.com এর একটি প্রজেক্টকে কেন্দ্র করে। সে যে ছবির গ্যালারী তৈরী করেছেন তাই আমি ব্যাখ্যা করবো। বুঝিয়ে দেব কিভাবে এটি কাজ করে।
প্রজেক্টের ডেমো দেখুন এখানে
প্রজেক্টটি ডাউনলোড (২৮০ কিলোবাইট) করুন এখান থেকে

এখানে মূলত: হোভার বক্সের উপর কাজ করা হয়েছে।
যখন মাউস পয়েন্টারটি কোন ছবির উপরে যায় তখনই ছবিটির সাইজের পরিবর্তিত রুপ দেখা যায়। এ কাজটি করতে নিচের কোড ব্যবহার করা হয়েছে।

*
{
border: 0px none;
margin: 0;
padding: 0
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
text-decoration: none;
}

body
{
background: #fff;
color: #777;
margin: 0 auto;
padding: 50px;
position: relative;
width: 620px;
}

h1
{
background: inherit;
border-bottom: 1px dashed #ccc;
color: #933;
font: 17px Georgia, serif;
margin: 0 0 10px;
padding: 0 0 5px;
text-align: center;
}

p
{
clear: both;
font: 10px Verdana, sans-serif;
padding: 10px 0;
text-align: center;
}

p a
{
background: inherit;
color: #777;
}

p a:hover
{
background: inherit;
color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
/* ছবির উপরে মাউস পয়েন্টারের ইফেক্ট  */
.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

প্রজেক্টটি ডাউনলোড করে নিজে নিজে কাজ করুন।

সিএসএস টিউটরিয়াল সূচিপত্র:

CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)

সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) CSS পাঠ-২

ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা

সুন্দর সুন্দর বক্স মডেল

সহজেই বানিয়ে ফেলি ছবির গ্যালারী

বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস

৭ টি সিএসএস গরম মসলা
সূত্র