ফটোশপ এবং CSS দিয়ে হোভার(hover) এনিমেশন যুক্ত বাটন তৈরি

বেশ অনেক দিন থেকেই ভাবছি এবং বলছি PSD থেকে CSS কোডিং এর ওপর টিউটোরিয়াল লিখবো। কিন্তু আঁতি-পাতি করতে করতে আর করা হয়ে উঠে না। তো যাইহোক আমি আজ খুব সাধারণ এটা টিউটোরিয়াল লিখবো ফটোশপ থেকে CSS কোডিং এর বেপারে। এই বিষয় গুলো নিয়ে যারা ঘাঁটা ঘাটি করেন। তারা হয়তো এই ধরেনের প্রজেক্ট অন্য কোন ইংরেজি ব্লগ থেকে করে থাকবেন। আজকের প্রজেক্ট হোভার (hover) যুক্ত বাটন তৈরি করা। হোভার (hover) বলতে মূলত বোঝায় একটা লিংক কিংবা কোন বাটন এর ওপর মাউস পয়েন্টার নিয়ে গেলে ওটার অবস্থা কেমন হবে। আমরা প্রজেক্ট শুরু করার আগে আমার তৈরি ডেমোটা এখান থেকে দেখে আসুন; তাহলে প্রজেক্ট এর কাজ করতে সুবিধা হবে।

PSD অর্থাৎ ফটোশপে বাটন তৈরি:

আমাদের প্রথম স্টেপ হবে ফটোশপে বাটনটা তৈরি করা। তাই প্রথমেই মাপ যোগ এর কাজ শেষ করি।

১. নিচের মত সেটিং নিয়ে একটা নতুন ডকুমেন্ট্রি নিন!

২. এবার View>New Guide যান এবং নিচের মত করে মোট পাঁচ বার Guide যোগ করুণ।

ব্যাস আমাদের মাপ যোগ শেষ।

এবার আমদের বাটন তৈরিতে নেমে পড়ি।

৩. Rounded Rectangle Tool এর সাহায্য নিচের মত করে একটা চতুর ভুজ আঁকুন যেটার Radius হবে 5px।।

৪. নিচের স্কিনসট অনুযায়ী এটার লেয়ার স্টাইল তৈরি করুন।

সবকিছু যদি ঠিক ভাবে করতে পারেন তাহলে আপনার বাটন নিচের মত অবস্থায় যাবে।

৫. এবার এটার নিচের অংশ একটা একই মাপের চতুর্ভুজ আঁকুন এবং লেয়ার স্টাইল একই রকম করে করুণ। শুধু Layer>Layer Style>Gradient Overlay গিয়ে নিচের মত করে সেটিং দিন।

ব্যাস আপনার বাটন তৈরি শেষ এবার নিচের ইচ্ছা মত টেক্সট যোগ করুন।

CSS কোডে পরিণত:

এখন আমরা এটাকে CSS পরিণত করবো।
১. নিচে মূল বাটন এর CSS কোড দেয়া হল।
.button {
width:350px;
height:80px;
display:block;
background-image:url(images/button.png);
background-position: top;
}
এখনে width একই থাকবে। তবে height মূল height এর অর্ধেক দিতে হবে কোডে লক্ষ্য করুন height: 80px দেয়া হয়েছে কারণ এখনে height আছে 160। এটা ওপর থেকে শুরু করার জন্য background position: top দিন যদি নিচ থেকে শুরু করাতে চান হলে top এর জায়গায় bottom দিতে হবে। আর images/button.png এখনে আপনার বাটন এর লিংক।

২. লিংক হবার বাটন এর CSS কোড।
.button:hover{
width:350px;
height:80px;
background-image:url(images/button.png) no repeat;
background-position: bottom;

}

এটার কোড আর ব্যাখ্যা করলাম না। দুটোর কোড এক সাথে নিচের মত হবে।

/* tutorialbd.com button by Noor Elahi Shibly*/
.button {
width:350px;
height:80px;
display:block;
background-image:url(images/button.png);
background-position: top;
}
.button:hover{
width:350px;
background-position: bottom;
height:80px;
background-image:url(images/button.png) no repeat;
}
/* End button effects */

এই বাটন আপনার ব্লগে (ওয়ার্ডপ্রেস এর ক্ষেত্রে) লাগাতে চাইলে styles.css এ যোগ করে দিন। আর ফ্রি ব্লগার এর ক্ষেত্রে ]]></b:skin> লেখার ওপর যোগ করে দিন।
পোষ্ট লেখার সময় এই কোডটুকু লিখলে হয়ে যাবে আর আপনার পছন্দ মত লিংক URL তে বসিয়ে দিন। ব্যাস।

আরও বলি:

আপনি যদি শুধু একটা পেজে এই বাটন ব্যাবহার করতে চান যেমন আমি ব্যাবহার করেছি; তাহলে আপনাকে XHTML কোড জানতে হবে। এটা নিয়ে আর একদিন লিখবো।

একাধিক স্টাইলের বাটন ব্যাবহার করতে চাইলে button1, button2 দিতে হবে এবং class=”button” এর এখানে class=”button1” , class=”button2” দিলেই হবে।

পুরো প্রজেক্ট এর সোর্চ ফাইল এখান থেকে নামিয়ে নিতে পারেন।

17 thoughts on “ফটোশপ এবং CSS দিয়ে হোভার(hover) এনিমেশন যুক্ত বাটন তৈরি”

  1. টিউটোরিয়ালটি বেশ চমৎকার হয়েছে। সিএসএস এর থিম বানানোর ক্ষেত্রে প্রাথমিক বেপারটা সহজেই শিখতে পারবে এই টিউটোরিয়াল থেকে। আমার মনে হয়। এটাই বাংলা ভাষায় পিএসডি থেকে সিএসএস টিউটোরিয়ালের প্রথম প্রচেষ্টা। আশা করি নিয়মিত আরও কিছু টিউটোরিয়ালের মাধ্যমে বিষয়টি আরো পরিষ্কার ভাবে বুঝিয়ে দিবেন।

    1. ধন্যবাদ মাহবুব ভাই, আমি চেষ্টা করে যাবো। ভাবছি একটা লেআউট বানানো শেখাবো এবং এটার CSS কোডিং নিয়ে টিউটোরিয়াল লিখবো।

  2. ৫ তারা টিউটোরিয়াল :LOL:
    সুপার!
    কোডের কমেন্টা আরো দুলাইন লিখতে পারতেন! ছোট বেলায় যখন ফ্রী টেম্পলেট নামাতাম ওগুলোতে কোডের থেকে কমেন্ট বেশি থাকত!

      1. @শিবলী,
        দুঃখিত আসলে আমারই বলতে ভুল হয়েছে।
        css কোডের কমেন্ট অংশ (*/……….*/) এখানে আরো কিছু উল্লেখ (যেমনঃ লাইসেন্স কপিরাইট) করতে পারতেন।

        1. @ইমরান, আসলে কোডের হেডলাইন লেখার কোন দরকারই নেই। শুধু কোড গুলোকে ভাগ করার সুবিধার্থে এই সব লেখা হয়। তবে লিখলে কোড লেখক এর লাভ হয়।

          1. @শিবলী,
            আসলে কিছি লেখাই ঠিক না এতে সাইট ভারি হয় 😉 । আর যেহেতু এটা টিউটোরিয়াল তাই লেখাটা আরো বেশিও হওয়া উচিত। নয়লে যারা সিএসএস পারেন কিমি. তারা ফ্যাসাদে পড়তে পারেন। 🙁

  3. মাহবুব(2)

    ধন্যবাদ শিবলী ভাই, এই রকম আরো টিউটোরিয়াল পেলে আমাদের মত শিক্ষানবিসরা উপকৃত হব।

    1. @ডিজে আরিফ, ধন্যবাদ আরিফ মন্তব্য করার জন্য। আসলে কোন থিম যখন তৈরি করা হয়। সেটা প্রথমে ফটোশপে তৈরি করা হয়। আর ঐ ফটোশপের ফাইলটার ওয়েব প্রোগ্রামিং রূপ হল থিমের CSS কোড।
      আসলে ব্যাপারটা আরও ভালো এবং বিস্তারিত বলে বোঝাতে হবে। আমি আমার পরের পোষ্টে বোঝানোর চেষ্টা করবো।

  4. সালাম, ভাইয়া আমি ওয়েব ডিজাইন শিখেত চাই, ভাল ও আন্তরিকতার সাথে কোথা থেকে শিখতে পারব? আমি মিরপুর-১২ তে থাকি। ধন্যবাদ।

    1. @RIFAT, আপনি আমার পরিচিতিতে দেখেছেন কি না জানি না। আমি খাগড়াছড়িতে থাকি এবং দশম শ্রেণীর ছাত্র। আমি কোন প্রতিষ্ঠান থেকে শিখি নি। আমি ইন্টারনেট থেকেই শিখেছি।
      আপনি ওয়েব ডিজাইন শেখার জন্য প্রথমে http://www.w3schools.com এ গিয়ে প্রাথমিক জিনিস গুলো শিখতে পারেন। এখন এই বিষয় গুলো আপনার কাছে পরিষ্কার হবে তখন আপনি net.tutsplus.com এর প্রজেক্ট গুলো প্রাকটিস করতে পারেন। আপনি তারপর নিজে নিজেই বুঝতে পারবেন আপনাকে কি শিখতে হবে। তার জন্য তো Google তো আছেই। সার্চ দিন এবং জানুন আপনি কি জানতে চান! আর আপনি যদি প্রফেশনাল ভাবে ওয়েব ডিজাইন শিখতে চান তাহলে আপনার ফটোশপ জনতে হবে। ফটোশপ এর প্রাথমিক জিনিস গুলো psd.tutsplus.com থেকে শিখতে পারেন। ফটোশপে লেয়াউট বানানো ওয়েব ডিজাইন এর প্রথম ধাপ। আমি এরপরের টিউটোরিয়ালে এই বিষয় গুলো নিয়ে আলোচনা করবো।
      ওহ্ মন্তব্য করার জন্য অসংখ্য ধন্যবাদ।

  5. ভাইয়া জটিল কাজের!
    অনেক দিন আগেই শিরোনাম পরেছিলাম কিন্তু পুরো পোস্ট পরিনি, আজ পড়লাম।

    আমাকে আজকেই এই নিয়েই একটা কাজ করতে হবে।

  6. শিবলী ভাই, আপনাকে অসংখ্য ধন্যবাদ এ রকম একটি পোস্ট করার জন্য। ভবিষ্যতে আরো কিছু জানতে পারবো আশা করি।
    ভাল থাকবেন।

Leave a Comment