Home-theater-designers
আপনি যদি কয়েক মিনিটেরও বেশি সময় ধরে ইন্টারনেটে থাকেন, তবে সম্ভাবনা রয়েছে যে আপনি একটি CSS গ্রেডিয়েন্ট জুড়ে এসেছেন। CSS ব্যাকগ্রাউন্ড প্রপার্টি বিভিন্ন স্টাইলের একটি পরিসীমা তৈরিতে ব্যবহার করা যেতে পারে এবং গ্রেডিয়েন্ট ভ্যালুর সাথে এটি কি করতে পারে তার মধ্যে সবচেয়ে আকর্ষণীয় ধরনের একটি।
কিভাবে বিভিন্ন সিএসএস গ্রেডিয়েন্ট ডিজাইন এবং তৈরি করতে হয় তা জানা যে কোন সফটওয়্যার ডিজাইনার বা ডেভেলপারের জন্য একটি সম্পদ। এই প্রবন্ধ থেকে, আপনি আপনার প্রকল্পে সিএসএস গ্রেডিয়েন্ট অন্তর্ভুক্ত করা শুরু করার জন্য আপনার যা জানা দরকার তা শিখবেন।
একটি CSS গ্রেডিয়েন্ট কি?
একটি সিএসএস গ্রেডিয়েন্ট মূলত দুই বা ততোধিক রঙের সংমিশ্রণ যা সহজেই এক থেকে অন্যটিতে রূপান্তরিত হয়। একটি CSS গ্রেডিয়েন্টের ট্রানজিশনাল অবস্থা ব্যবহৃত গ্রেডিয়েন্টের ধরণের উপর নির্ভর করে। সফ্টওয়্যার ডিজাইনে সাধারণত দুটি প্রধান ধরণের গ্রেডিয়েন্ট ব্যবহার করা হয়: লিনিয়ার এবং রেডিয়াল।
যাইহোক, একটি তৃতীয় ধরনের গ্রেডিয়েন্ট আছে যা কম জনপ্রিয় এবং কনিক গ্রেডিয়েন্ট নামে পরিচিত।
সিএসএস গ্রেডিয়েন্টস সিনট্যাক্স
Background-image: gradient-type (direction, color1, color2);
CSS গ্রেডিয়েন্টকে ব্যাকগ্রাউন্ড-ইমেজ CSS প্রপার্টিতে বরাদ্দ করা উচিত। গ্রেডিয়েন্ট টাইপ অনেকের মধ্যে একটি হতে পারে; রৈখিক-গ্রেডিয়েন্ট, রেডিয়াল-গ্রেডিয়েন্ট, বা কনিক-গ্রেডিয়েন্ট। গ্রেডিয়েন্টের ধরন হল বন্ধনী খোলার এবং বন্ধ করার পর যেটিতে গ্রেডিয়েন্টের ক্রান্তিকাল দিক রয়েছে, সেইসাথে গ্রেডিয়েন্টে অন্তর্ভুক্ত করা রংগুলি।
সম্পর্কিত: কিভাবে CSS এ ব্যাকগ্রাউন্ড ইমেজ সেট করবেন
উপরের উদাহরণ দুটি রং দেখায়, কিন্তু একটি গ্রেডিয়েন্টে বিভিন্ন রং থাকতে পারে। শুধুমাত্র প্রয়োজন হল যে তালিকার প্রতিটি রঙ একটি কমা দ্বারা পৃথক করা হয়।
লিনিয়ার গ্রেডিয়েন্ট কি?
লিনিয়ার গ্রেডিয়েন্ট হল সবচেয়ে জনপ্রিয় CSS গ্রেডিয়েন্ট। এটি দুই বা ততোধিক রং ব্যবহার করে একটি অনুভূমিক, উল্লম্ব বা তির্যক রূপান্তর গ্রেডিয়েন্ট তৈরি করে।
CSS লিনিয়ার গ্রেডিয়েন্ট উদাহরণ
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
উপরের কোডটি নিম্নলিখিত CSS গ্রেডিয়েন্ট তৈরি করবে:
উপরের উদাহরণ থেকে বাদ দেওয়া গ্রেডিয়েন্ট সিনট্যাক্সের একটি প্রধান উপাদান রয়েছে। এই উপাদানটি গ্রেডিয়েন্টের ক্রান্তিকাল দিক, এবং এটি বাদ দেওয়া হয়েছিল কারণ রৈখিক গ্রেডিয়েন্টের ডিফল্ট সারিবদ্ধকরণ উল্লম্ব (উপরে থেকে নীচে); এই উদাহরণে পছন্দসই আউটপুট।
উপরের কোডটি নিম্নোক্ত কোডের মতো একই ফলাফল তৈরি করে। দুটির মধ্যে একমাত্র পার্থক্য হল কোডের দিকনির্দেশ বিভাগ।
নিচের রৈখিক গ্রেডিয়েন্ট উদাহরণ ব্যবহার করে
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
আপনি আউটপুট থেকে দেখতে পাচ্ছেন যে উপরের কোডটি একটি গ্রেডিয়েন্ট তৈরি করে যা উপরের দিকে নীল দিয়ে শুরু হয় তারপর ধীরে ধীরে নীচে কমলাতে রূপান্তরিত হয়। আপনি যদি রঙের ক্রম বিপরীত করতে চান তবে আপনি কেবল প্রতিস্থাপন করতে পারেন নীচে সঙ্গে শীর্ষে এবং এটি গ্রেডিয়েন্টের দিক বিপরীত করবে, নিম্নলিখিত আউটপুট উত্পাদন করবে:
উল্লম্ব প্রান্তিককরণের অনুরূপ, একটি গ্রেডিয়েন্টের অনুভূমিক সারিবদ্ধকরণ দুটি নির্দেশক কীওয়ার্ড ব্যবহার করে অর্জন করা যেতে পারে: বামে এবং ডানদিকে , যা যথাক্রমে নিম্নলিখিত আউটপুট উত্পাদন করবে।
কিভাবে বাষ্পে ট্রেডিং কার্ড পাবেন
তির্যক লিনিয়ার গ্রেডিয়েন্ট
রৈখিক গ্রেডিয়েন্টের যে কোন দিকে একটি তির্যক রৈখিক গ্রেডিয়েন্ট রূপান্তর অর্জন করা সম্ভব। কীওয়ার্ডের মাত্র চারটি সুনির্দিষ্ট তালিকা রয়েছে যা এই সম্ভব করার জন্য আপনাকে জানতে হবে।
- নিচে ডানদিকে
- নিচে বাম দিকে
- উপরে ডান দিকে
- উপরে বাম দিকে
তির্যক রৈখিক গ্রেডিয়েন্ট উদাহরণ ব্যবহার করে
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
উপরের উদাহরণটি নিম্নলিখিত আউটপুট উত্পাদন করে:
আপনি উপরের আউটপুট থেকে দেখতে পাচ্ছেন, রৈখিক গ্রেডিয়েন্টটি তার বক্ররেখার দিক থেকে উপরের বাম থেকে নীচের ডান অংশে স্থানান্তরিত করে।
বহু রঙের লিনিয়ার গ্রেডিয়েন্ট
একটি রৈখিক গ্রেডিয়েন্টে দুই বা ততোধিক রঙ থাকতে পারে, কিন্তু একটি গ্রেডিয়েন্টে আরো রং দেখতে কেমন? একটি বহুবর্ণ রৈখিক গ্রেডিয়েন্ট রঙ বিন্যাস তার দিকনির্দেশের উপর নির্ভরশীল। যেগুলি একটি অনুভূমিক দিক থেকে রূপান্তরিত হয় তার প্রতিটি নতুন রঙ বাম বা ডানদিকে রৈখিক গ্রেডিয়েন্টের উপস্থিত হবে, যা রৈখিক গ্রেডিয়েন্টের সঠিক দিকের উপর নির্ভর করে।
বহু রঙের লিনিয়ার গ্রেডিয়েন্ট উদাহরণ
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
উপরের কোডের লাইন নিম্নলিখিত আউটপুট তৈরি করবে:
আপনি দেখতে পাচ্ছেন যে প্রতিটি নতুন রঙ গ্রেডিয়েন্টের ডানদিকে যোগ করা হয়েছে, যা শেষ পর্যন্ত একটি রংধনুতে রূপান্তরিত করে। একই আউটপুট একটি উল্লম্ব দিক অর্জন করা যেতে পারে; যাইহোক, রৈখিক গ্রেডিয়েন্টের নির্দিষ্ট রঙের ব্যবস্থা উল্লম্ব দিকের কীওয়ার্ড (উপরে বা নীচে) উপর নির্ভর করবে।
একটি রেডিয়াল গ্রেডিয়েন্ট কি?
রেডিয়াল গ্রেডিয়েন্ট দুইটির একটি সর্পিল গ্রেডিয়েন্ট তৈরি করে যা ডিফল্টভাবে কেন্দ্র থেকে শুরু হয়। যেখানে রৈখিক গ্রেডিয়েন্ট একটি সরল গ্রেডিয়েন্ট তৈরি করে যা উল্লম্ব বা অনুভূমিকভাবে প্রবাহিত হয়, রেডিয়াল গ্রেডিয়েন্ট একটি বৃত্তাকার গ্রেডিয়েন্ট তৈরি করে যা কেন্দ্র থেকে বাইরের প্রান্তে প্রবাহিত হয়।
রেডিয়াল গ্রেডিয়েন্ট উদাহরণ ব্যবহার করে
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
উপরের কোডের লাইন নিম্নলিখিত আউটপুট তৈরি করবে:
রেডিয়াল গ্রেডিয়েন্ট সেন্টার পরিবর্তন করা
ডিফল্টরূপে একটি রেডিয়াল গ্রেডিয়েন্ট গ্রেডিয়েন্টের কেন্দ্রে শুরু হয়; যাইহোক, কয়েকটি কীওয়ার্ডের প্রবর্তনের সাথে মূল বিন্দু পরিবর্তন করা সম্ভব।
গুগল ড্রাইভ এক অ্যাকাউন্ট থেকে অন্য অ্যাকাউন্টে স্থানান্তর করুন
রেডিয়াল গ্রেডিয়েন্ট স্টার্ট পজিশন পরিবর্তন করা উদাহরণ
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
উপরের কোডের লাইন নিম্নলিখিত আউটপুট তৈরি করবে:
গ্রেডিয়েন্টের উপরের আউটপুট থেকে আপনি দেখতে পাচ্ছেন এখন কেন্দ্রের পরিবর্তে উপরের ডান দিক থেকে শুরু হয়। কীওয়ার্ড অন্তর্ভুক্ত করার কারণে এই পরিবর্তন সম্ভব উপরের ডানে উপরের কোডে। রেডিয়াল গ্রেডিয়েন্টের উৎপত্তি বিন্দু পরিবর্তন করতে নিম্নলিখিত কীওয়ার্ডগুলির তালিকা ব্যবহার করা যেতে পারে:
- উপরে বাঁদিকে
- নিচের ডানে
- নিচে বামে
বহু রঙের রেডিয়াল গ্রেডিয়েন্টস
রৈখিক গ্রেডিয়েন্টের মতো, রেডিয়াল গ্রেডিয়েন্ট দুটি আরও বেশি রং ব্যবহার করতে পারে, প্রধান পার্থক্য হল যেখানে রৈখিক গ্রেডিয়েন্ট একটি সরলরেখায় গ্রেডিয়েন্ট যোগ করে, রেডিয়াল গ্রেডিয়েন্ট বাইরের প্রান্তে নতুন রং যোগ করে।
বহু রঙের রেডিয়াল গ্রেডিয়েন্ট উদাহরণ
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
উপরের কোডের লাইন নিম্নলিখিত আউটপুট তৈরি করবে:
গ্রেডিয়েন্টস কাস্টমাইজ করা
এখন পর্যন্ত আপনি দেখেছেন কিভাবে একটি গ্রেডিয়েন্টের দিক এবং কেন্দ্র বিন্দু পরিবর্তন করতে হয়, কিন্তু আপনি কিভাবে একটি গ্রেডিয়েন্ট কাস্টমাইজ করবেন তা দেখেননি। একটি গ্রেডিয়েন্ট কাস্টমাইজ করা অনেক কাজের মত মনে হতে পারে, কিন্তু একবার আপনি একটি CSS ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট তৈরির মূল বিষয়গুলি বুঝতে পারলে পরবর্তী সুস্পষ্ট ধাপ হল আপনার CSS গ্রেডিয়েন্টগুলিকে আরও অনন্য করে তোলা।
উইন্ডোজ স্বয়ংক্রিয়ভাবে এই নেটওয়ার্কের প্রক্সি সেটিংস সনাক্ত করতে পারে না
ডিফল্টরূপে, একটি গ্রেডিয়েন্টের রংগুলি সমানভাবে বিতরণকৃত স্থান দখল করে প্রতিটি রঙ সহজেই এর পরের একটিতে রূপান্তরিত হয়। সুতরাং যদি দুটি রঙ একত্রিত হয়ে একটি গ্রেডিয়েন্ট তৈরি করে, তাহলে প্রতিটি রঙ এক থেকে অন্যটিতে স্থানান্তরের সময় উপলব্ধ স্থানটির অর্ধেক দখল করবে। যদি তিনটি রঙ একত্রিত হয় তবে প্রতিটি রঙ উপলব্ধ স্থানটির এক তৃতীয়াংশ দখল করবে।
একটি কাস্টমাইজড গ্রেডিয়েন্টের সাথে, আপনি স্পষ্টভাবে বরাদ্দ করে একটি গ্রেডিয়েন্টে একটি রঙ কতটুকু স্থান দখল করবে তা নির্ধারণ করতে পারেন রঙ-স্টপ অবস্থান ।
একটি লিনিয়ার গ্রেডিয়েন্ট কাস্টমাইজ করার উদাহরণ 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
উপরের কোডের লাইন নিম্নলিখিত আউটপুট তৈরি করবে:
উপরের আউটপুটটি রৈখিক গ্রেডিয়েন্টের দ্বিতীয় রঙটি দেখায় যেটি গ্রেডিয়েন্টে প্রথম রঙের 30% বিন্দুতে থামছে, তার প্রথাগত অবস্থানের পরিবর্তে, এবং কারণ দ্বিতীয় রঙটিও গ্রেডিয়েন্টের চূড়ান্ত রঙ এটি স্বাভাবিকভাবেই শেষ পর্যন্ত প্রসারিত ।
আপনি যদি প্রথম রঙের শেষে উপরের কোডে 30% স্থান দিতেন তবে জিনিসগুলি আরও স্পষ্ট হয়ে উঠবে।
একটি লিনিয়ার গ্রেডিয়েন্ট কাস্টমাইজ করা উদাহরণ 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
উপরের কোডটি নিম্নলিখিত আউটপুট তৈরি করবে।
উপরের আউটপুটটি স্পষ্টভাবে দেখায় যে গ্রেডিয়েন্টের প্রথম রঙটি গ্রেডিয়েন্টে দ্বিতীয় রঙের 30% বিন্দুতে থামছে। উপরের উদাহরণের সাথে এই উদাহরণটি আপনার বোঝার জন্য রঙ-স্টপ কাস্টমাইজেশন সহজ করতে সাহায্য করবে।
একটি রেডিয়াল গ্রেডিয়েন্ট কাস্টমাইজ করা একটি লিনিয়ার গ্রেডিয়েন্টের মতোই করা হয়। রেডিয়াল গ্রেডিয়েন্টে উপরের একই ফলাফল অর্জনের জন্য আপনাকে যা করতে হবে তা হল গ্রেডিয়েন্টের ধরন এবং দিক পরিবর্তন করা।
সিএসএস গ্রেডিয়েন্ট তৈরি করা কখনও সহজ ছিল না
এই টিউটোরিয়াল নিবন্ধটি আপনাকে রৈখিক এবং রেডিয়াল গ্রেডিয়েন্টগুলি সনাক্ত এবং তৈরি করার সরঞ্জাম সরবরাহ করে। আপনি যদি এই বিন্দুতে পৌঁছে থাকেন, তাহলে আপনি শিখেছেন কিভাবে দিক এবং একটি গ্রেডিয়েন্টের কেন্দ্র পরিবর্তন করতে হয়। উপরন্তু, আপনার এখন CSS গ্রেডিয়েন্টগুলি কাস্টমাইজ করার এবং অনন্য ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট তৈরির দক্ষতা রয়েছে।
যাইহোক, যদি আপনি সরাসরি নতুন এবং অনন্য গ্রেডিয়েন্ট তৈরিতে যেতে না চান, তাহলে আপনি আগে থেকে বিদ্যমান কিছু চমৎকার তৈরি করে শুরু করতে পারেন।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল 27 স্টাইলিশ CSS ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট উদাহরণসলিড কালারগুলো তাই গত বছর। গ্রেডিয়েন্ট আছে! কিন্তু আপনি কিভাবে তাদের CSS এ তৈরি করবেন?
পরবর্তী পড়ুন সম্পর্কিত বিষয়- প্রোগ্রামিং
- ওয়েব ডেভেলপমেন্ট
- ওয়েব ডিজাইন
- সিএসএস
Kadeisha Kean একজন ফুল স্ট্যাক সফটওয়্যার ডেভেলপার এবং টেকনিক্যাল/টেকনোলজি রাইটার। কিছু জটিল প্রযুক্তিগত ধারণাকে সরলীকরণ করার তার স্বতন্ত্র ক্ষমতা আছে; এমন উপাদান তৈরি করা যা সহজেই যে কোন প্রযুক্তি নবজাতক দ্বারা বোঝা যায়। তিনি লেখালেখি, আকর্ষণীয় সফটওয়্যার বিকাশ এবং বিশ্ব ভ্রমণ (তথ্যচিত্রের মাধ্যমে) সম্পর্কে উত্সাহী।
Kadeisha Kean থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন