:hover ইফেক্টের মধ্যে font-weight ::..:: একটি সমস্যা ও তার সমাধান

আপনি যদি কোন এ্যালিমেন্টে padding ব্যবহার করেন এবং তাতে box-sizing: border-box; দেয়া না থাকে, তাহলে ঐ এ্যালিমেন্টের height এবং width বেড়ে যায়। এইটা অনেক পুরোনো ব্যাপার। আজকে আমরা যে বিষয়টা নিয়ে আলোচনা করবো, সে সমস্যাটাও অনেকটা এই রকম। box-sizing: border-box; দিলে তো আর padding এর কারণে আয়তন বাড়ে না, কিন্তু ….

আপনি যদি কোন বাটনের hover এ তার টেক্সট এর font-weight বাড়িয়ে দেন, তাহলে সেই বাটনটির জায়গা বেড়ে যাবে, আর hover শেষ হয়ে গেলে জায়গা আগের মত হয়ে যাবে। আর এই পরিবর্তনটুকু transition দিলেও আস্তে হবে না, দ্রুত হবে। দেখলে মনে হবে transition দেয়াই হয় নাই।

তবে আপনি যদি বাটনের (বা যে এলিমেন্টে এ ধরণের hover ইফেক্ট দিতে চাচ্ছেন, সেটার) height এবং width উল্লেখ করে দেন, তাহলে এই সমস্যা হবে না। কিন্তু বাটনে সাধারণত আমরা height এবং width ব্যবহার করি না। আমরা বাটনের ক্ষেত্রে padding ব্যবহার করি সাধারণত। তো … জাতির বিবেকের কাছে এখন প্রশ্ন হলো- এর সমাধান কী?

 

এর সমাধান হইল text-shadow

hover এ font-weight এর পরিবর্তে text-shadow দিয়ে দিলে একই কাজ হয় অনেকটা। hover এ টেক্সট এর যে কালার, text-shadow এর কালারও সেটাই হতে হবে, আর সবচে’ ভাল হয় ঐ কালারটির কোড hex না দিয়ে rgba দিলে। rgba এর সর্বশেষ যে ভ্যালু আছে – opacity সেটিকে .8 অথবা যতটুকু দিলে ভাল ততটুকু।

এটা জরুরী না যে, উপরের ইমেজে যেভাবে যে পরিমাণ দেয়া হয়েছে, আপনারাও সেভাবে দেবেন। যার যেভাবে দরকার দিতে হবে। কোথায় কতটুকু দরকার, সেটা বুঝতে হলে প্র্যাক্টিস ছাড়া কোন দ্বিতীয় উপায় নেই। আর হ্যা … text-shadow এর hoff এবং voff – এই দুইটার যে কোন একটার ভ্যালু হবে, অথবা কখনও দুইটার ভ্যালুই লাগবে। তবে blur এর ভ্যালু 0 রাখাটাই ভাল, খুব বেশি হলে 1px

 

যাক, অনেক কথা বলা হইল, এইবার নিচের উদাহরণটা দেখেন এবং কাজ শুরু করে দেন। নিচের উদাহরণে দুইটা hover ইফেক্ট দেখানো হয়েছে। একটি hover এ font-weight বাড়িয়ে দেয়া হয়েছে, অন্যটিতে font-weight এর পরিবর্তে দেয়া হয়েছে text-shadow, পার্থক্য নিজেরাই বুঝতে পারবেন।

ওকে … ছোট একটা আইডিয়া মাথায় আসল তাই শেয়ার করলাম। আবার দেখা হবে….

মন্তব্য

মন্তব্য