Daffodil Computers Ltd.
Create your Own Website => CSS style => Topic started by: bbasujon on January 11, 2012, 05:36:44 AM
-
ফটোশপ এবং CSS দিয়ে হোভার(hover) এনিমেশন যুক্ত বাটন তৈরি
PSD অর্থাৎ ফটোশপে বাটন তৈরি:
আমাদের প্রথম স্টেপ হবে ফটোশপে বাটনটা তৈরি করা। তাই প্রথমেই মাপ যোগ এর কাজ শেষ করি।
১. নিচের মত সেটিং নিয়ে একটা নতুন ডকুমেন্ট্রি নিন!
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/1.gif)
২. এবার View>New Guide যান এবং নিচের মত করে মোট পাঁচ বার Guide যোগ করুণ
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/2-1.gif)
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/2-2.gif)
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/2-3.gif)
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/2-4.gif)
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/2-5.gif)
ব্যাস আমাদের মাপ যোগ শেষ।
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/2-6.gif)
এবার আমদের বাটন তৈরিতে নেমে পড়ি।
৩. Rounded Rectangle Tool এর সাহায্য নিচের মত করে একটা চতুর ভুজ আঁকুন যেটার Radius হবে 5px।।
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/3.gif)
৪. নিচের স্কিনসট অনুযায়ী এটার লেয়ার স্টাইল তৈরি করুন।
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/4-1.gif)
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/4-2.gif)
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/4-3.gif)
সবকিছু যদি ঠিক ভাবে করতে পারেন তাহলে আপনার বাটন নিচের মত অবস্থায় যাবে।
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/4-4.gif)
৫. এবার এটার নিচের অংশ একটা একই মাপের চতুর্ভুজ আঁকুন এবং লেয়ার স্টাইল একই রকম করে করুণ। শুধু Layer>Layer Style>Gradient Overlay গিয়ে নিচের মত করে সেটিং দিন।
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/5.gif)
ব্যাস আপনার বাটন তৈরি শেষ এবার নিচের ইচ্ছা মত টেক্সট যোগ করুন।[/size
(https://sites.google.com/site/uploadshibly/phatosapa-ebam-css-diye-hobhara-hover-yukta-batana-tairi/button.png)
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 */