শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৬ (ছবিতে Enlarge ইফেক্ট তৈরি)

0
287
এটি 13 পর্বের CSS প্রেক্টিকেল ক্লাশ সিরিজ টিউনের 6 তম পর্ব

আজকের বিশয়ঃ-

আজকে আমরা একটি ছবিতে সিএসএস এর মাধ্যমে একটি চমৎকার ইফেক্ট দেয়া শিখে নিব। এটির নাম হচ্ছে Enlarge Image। অনেক সময় বিভিন্য ওয়েবসাইটে দেখবেন ছবিতে মাউস ধলেই ছবিটি সুন্দর ভাবে বড় হয়ে শো করছে। মানে হবার বা Enlarge হয়ে যাচ্ছে। এটি আমরা আজকে শিখে নিব। নিচের কোডিং গুলো এবং নির্দেশনা দেখুন।

তবে যারা সিএসএস গুরু হতে চান তাদের জন্য আমার এই ক্লাস নয়। আপনারা এই টিউটোরিয়াল গুলো দেখে নিতে পারেন।

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

আজকে আমরা একটি চমৎকার ছবির এফেক্ট করা শিখব।

Enlarge Image with CSS শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৬ (ছবিতে Enlarge ইফেক্ট তৈরি)

নিজের পিসিতে তৈরি করে দেখে নিন আগে।


যে কোন সিএসএস নিজের পিসিতে তৈরি করতে এই টিপস গুলো মনে রাখবেন। প্রথমে আপনার সিএসএস ফাইলটি একটি নোটপ্যাড খুলে সেখনে পেস্ট করে সেভ করুন style.css নামে এবার আপনার এইচটিএমএল ফাইলের মাঝে <head> এর ঠিক পরেরি এই কোডিং যুক্ত করুন

<link rel =”stylesheet” type text=”text/css” href=”style.css”/>

এখানে দেখুন style.css ফাইলের নামটি দেয়া আছে আপনার ফাইলের নাম অন্য কিছু হলে আপনি এই জায়গায় অন্য কিছু ব্যবহার করুন। আরেকটি কথা মনে রাখুন অবশ্যই style.css এবং HTML ফাইলটি একটি ফোল্ডার এর মাঝে রাখবেন এবং প্রয়োজনীয় ছবি গুলো একি ফোল্ডারে রাখবেন। তবে যদি অনলাইনে আপনার সিএসএস ফাইল আপলোড করা থাকে সেই ক্ষেত্রে ফাইলের লিংক দিবেন যেমন

<link rel =”stylesheet” type text=”text/css” href=”http://www.yoursitename.com/foldername/style.css”/>

আসা করি বুঝতে পেরেছেন প্রতিবার একি ভাবে নিজের কম্পিউটার এ টেস্ট করে দেখে নিবেন। ধন্যবাদ।

CSS Code

.enlarge:hover {
	transform:scale(2,2);
	transform-origin:0 0;
}

HTML Code

<div style="width:155px; height:115px;">

<a href="#"><img src="test-image.jpg" alt="PZ3 demo #2" title=""></a>

নোটঃ আমার দেয়া উপরের ছবিটি সেভ করে নাম দিবেন test-image.jpg বাকি সব আগের মত।

Series Navigation << শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৫ (Two Level horizontal মেনু তৈরি)শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৭ (ফটোশপ বাদ দিন, সিএসএস দিয়ে এবার টেক্সট এর মাঝে 3d এবং Stroke… >>
টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

মন্তব্য দিন আপনার