CSS 3 দিয়ে Gradient এর ব্যাবহার

9 Comments / সিএসএস (CSS) / By

ফটোশপে কাজ করেছেন অথচ Gradient এর নাম শোনেন নি। এমন কেউ থাকতে পারে বলে আমি বিশ্বাস করি না। এই সুবিধা এখন শুধু CSS ব্যাবহার করেই পাওয়া যাবে। তাই ভাবলাম এই নিয়ে একটা টিউটোরিয়ল লিখি। সামনের টিউটোরিয়ার গুলোতে এর ব্যাবহার বুঝতে পারবেন।

১. Linear Gradient

এইটাতে ওপরে একটা এবং নিচে একটা রং।

ব্যবহৃত CSS:
-webkit-gradient(linear, left top, left bottom, from(red), to(white));
-moz-linear-gradient(red, white)

২. Reflected Gradient

এখানে তিনটি রং এর ব্যাবহার ঘটেছে।
ব্যবহৃত CSS:
-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
-moz-linear-gradient(left top, red, white, red);

৩. Reflected Gradients

এটার মাঝে এবং পাসে দুইটা রং ব্যাবহার করা যাবে। মাঝেটার গোল আকারের হবে।
ব্যবহৃত CSS:
-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
-moz-radial-gradient(white, red)

আমি আপাতত এই তিনটা Gradients স্টাইল শিখেছি। তাই আপাতত এইখানেই টিউটোরিয়াল শেষ।

9 thoughts on “CSS 3 দিয়ে Gradient এর ব্যাবহার”

  1. aminul

    @শিবলী ভাইয়া আপনাকে অনেক ধন্যবাদ টিউটোরিয়াল বিডি তে শুধু আপনার জন্যই আমি ফিড গুলো ইমেইল এ গ্রহণ করি। আপনার টিউটোরিয়াল খুবিই অসাধারণ। এই ধনের বিষয় নিয়ে বাংলা ভাষায় সেই রকম কোন পোস্ট হয়না।

    1. শিবলী

      @aminul, ধন্যবাদ আমিনুল ভাই। আমি মূলত নিজেকে একজন ডিজাইনার ভাবি (!!) এবং এই বিষয় নিয়ে লিখতেই ভালোবাসি এই ক্রেডিট মনে হয় আমার চেয়ে মাহবুব ভাই এর বেশী পাওনা। আশা করি আপনি সাথে থাকবেন এবং মন্তব্য করবেন।

  2. Md. Frioz Mahmud

    ভাই
    -webkit-gradient
    -moz-linear-gradient
    ………………………………….
    -webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
    -moz-linear-gradient(left top, red, white, red);
    এই সকল েকাড এর িবস্থািরত আেলাচনা করলে ভালো হত।

    1. ডিজাইনার শিবলী

      @Md. Frioz Mahmud, ভাইয়া কোডটা একটু ভালো করে লক্ষ্য করুন। আমি এখানে এইজন্য কোন কালার কোড ব্যাবহার করি নাই। সরাসরি রং এর নাম ব্যাবহার করেছি। এত ছোট কোডে বিস্তারিত আলোচনা করা তো ভীষণ কঠিন।

    2. himu

      @Md. Frioz Mahmud,
      এটা সহজ একটা কোড
      -webkit-gradient(linear, left top, left bottom, from(red), to(white));
      -moz-linear-gradient(red, white)

      এখানে দুটি লাইনের কাজ এক,এর মানে যে কোন একটা লাইন লিখলেও এ কোডটি কাজ করবে। দুই বার লেখার কারন হল CSS3 এখনও নতুন তাই বিভিন্ন ওয়েব ব্রাউজারে যেন কোডটা কাজ করে এ কথা মাথায় রেখে দুই বার লেখা হয়েছে।
      খেয়াল করে দেখুন -webkit- ও -moz- এ দুটি কথা দুটি লাইনের শুরুতে লিখা আছে। এখানে -webkit- লিখা হয়েছে এপোল সাফারি ও গুগল ক্রোম এর কোডটি যেন কাজ করে এ জন্য, আর -moz- লিখা হয়েছে মজিলা ফাইয়ারফক্স এর জন্য।

      এর পর শুরু হয়েছে মূল ফাংশন gradient আর ( ) এর ভিতরে এর প্যেরামিটার।

Leave a Comment