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

ফটোশপে কাজ করেছেন অথচ 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 স্টাইল শিখেছি। তাই আপাতত এইখানেই টিউটোরিয়াল শেষ।

আরো পড়ুনঃ
" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true">

ফেসবুকের মাধ্যমে মন্তব্য লিখুন

  9 comments for “CSS 3 দিয়ে Gradient এর ব্যাবহার

  1. February 25, 2012 at 4:19 pm

    খুব সুন্দর পোষ্ট। খুব ভাল লাগল। আমার কাজে লাগবে।

  2. October 28, 2011 at 11:15 pm

    কোড paste করলেই হবে ? আমি আমার সাইট http://www.bdwild.com/ edit করতে চাই . কিন্তু Css বুঝিনা

  3. September 27, 2011 at 10:16 pm

    very good tutorial……………..

  4. July 21, 2011 at 11:20 pm

    ভাল লেগেছে।

  5. May 14, 2011 at 11:39 am

    ভাই
    -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);
    এই সকল েকাড এর িবস্থািরত আেলাচনা করলে ভালো হত।

    • May 15, 2011 at 4:23 pm

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

    • November 21, 2011 at 12:38 pm

      @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 আর ( ) এর ভিতরে এর প্যেরামিটার।

  6. May 9, 2011 at 7:53 am

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

    • May 9, 2011 at 12:49 pm

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

Leave a Reply