box-shadow এর কিছু প্রয়োজনীয় ট্রিক্স

আজকে লেখালেখির কাজ কম। সবকিছু ডেমোতে দেয়া থাকবে, দেখে বুঝে নিবেন নিজেরা। আর box-shadow সম্পর্কে কিছু বিষয় আছে, যেগুলো আগে জানা দরকার, বিষয়গুলো নিয়ে কি আগে কখনও বলা হয়েছিল? আমার খেয়াল নাই বলছিলাম কি না, যাই হোক, নিচের বিষয়গুলা ভালভাবে জেনে নিন যদি আগে থেকে জানা না থাকে-

  • box-shadow এর মধ্যে hoff voff blur ছাড়াও চতুর্থ আরেকটি ভ্যালু থাকে, যার নাম – spread
  • spread এর দ্বারা আপনি box-shadow এর width বাড়াতে পারবেন।
  • যে কোন একটি এলিম্যান্টে একাধিক box-shadow ব্যবহার করা যায়, যেমন-

দেখতে অনেকগুলো এলিমেন্ট মনে হলেও মূলত এখানে একটি মাত্র এলিমেন্ট, আর সেটি হলো প্রথমটি, বাকিগুলো সেই একটি এলিমেন্টেরই box-shadow, এই উদাহরণে শুধু এটিই বোঝানো উদ্দেশ্য যে, box-shadow একই এলিমেন্টে একাধিকবার নেয়া যায়। এর ব্যবহার কিভাবে আমরা করতে পারি, সেটা দেখানোর জন্যই নিচের উদাহরণটি দেয়া হচ্ছে।

 

মোট চারটি ট্রিক্স এর সাধারণ উদাহরণ দেখানো হয়েছে।

প্রথমটি হচ্ছে- কিভাবে box-shadow এর মাধ্যমে বর্ডারের কাজ করবেন সেটি।

 

দ্বিতীয়টিও box-shadow এর মাধ্যমে বর্ডারের কাজই দেখানো হয়েছে,
তবে এটিতে একাধিক বর্ডারের কাজ কিভাবে করতে হয় সেটি দেখানো হয়েছে।

 

তৃতীয়টিতে একাধিক box-shadow দিয়ে একটি সাধারণ এবং সুন্দর ডিজাইন দেখানো হয়েছে, যেটি অনেক ক্ষেত্রেই আমাদের কাজে লাগতে পারে।

 

চতুর্থটিতে দেখানো হয়েছে এমন একটি ডিজাইন, যেটা আমাদের অনেকরই প্রয়োজন হয়। অনেকে এই ডিজাইনটির দুই দিকের যে শ্যাডো, তার জন্য .png ইমেজ ব্যবহার করে, তবে এই উদাহরণটি ভালভাবে জানলে এ ধরণের ইমেজ আর ব্যবহার করতে হবে না।

আজকের মত শেষ করছি, নিচে সবগুলো উদাহরণ একসাথে দেয়া হলো, ভালভাবে দেখুন, প্র্যাক্টিস করুন।

PREVIEW

DOWNLOAD

মন্তব্য

মন্তব্য