01 এর 04
CSS3 সহ ক্রস ব্রাউজার রৈখিক গ্রেডিয়েন্ট তৈরি করা
রৈখিক গ্রেডিয়েন্টস
আপনি দেখতে পাবেন সবচেয়ে সাধারণ ধরনের গ্রেডিয়েন্ট, দুটি রং একটি রৈখিক গ্রেডিয়েন্ট। এর মানে হল যে গ্রেডিয়েন্ট সরলরেখায় সরানো হবে যা ধীরে ধীরে প্রথম রঙ থেকে অন্য যে রেখা বরাবর দ্বিতীয় দিকে চলে যাবে। এই পৃষ্ঠার চিত্রটি # 999 (গাঢ় ধূসর) থেকে #fff (সাদা) পর্যন্ত একটি সহজ বাম থেকে ডান গ্রেডিয়েন্ট দেখায়।
রৈখিক গ্রেডিয়েন্টগুলি সংজ্ঞায়িত করা সবচেয়ে সহজ এবং ব্রাউজারগুলিতে সর্বাধিক সমর্থন রয়েছে। CSS3 রৈখিক গ্রেডিয়েন্টগুলি অ্যানড্রয়েড 2.3+, ক্রোম 1+, ফায়ারফক্স 3.6+, অপেরা 11.1+ এবং সাফারি 4+ এ সমর্থিত। ইন্টারনেট এক্সপ্লোরার একটি ফিল্টার ব্যবহার করে গ্রেডিয়েন্ট যোগ করতে পারেন এবং IE 5.5 এ তাদের সমর্থন করে। এটি CSS3 নয়, তবে এটি ক্রস-ব্রাউজার সামঞ্জস্যের জন্য একটি বিকল্প।
যখন আপনি একটি গ্রেডিয়েন্ট নির্ধারণ করেন তখন আপনাকে বিভিন্ন কিছু সংজ্ঞায়িত করতে হবে:
- কি ধরনের গ্রেডিয়েন্ট এটি - লিনিয়ার বা রেডিয়াল
- যেখানে গ্রেডিয়েন্ট শুরু করা উচিত
- যেখানে গ্রেডিয়েন্ট থামাতে হবে
- গ্রেডিয়েন্টের মধ্যে কোন রং আছে এবং কোথায় শুরু করা উচিত এবং থামাতে হবে
CSS3 ব্যবহার করে রৈখিক গ্রেডিয়েন্ট নির্ধারণ করতে, আপনি লিখুন:
রৈখিক-গ্রেডিয়েন্ট ( কোণ বা পাশ বা কোণ , রঙ স্টপ , রঙ স্টপ )
- প্রথম আপনি নাম রৈখিক- গ্রেডিয়েন্ট সঙ্গে গ্রেডিয়েন্ট ধরনের সংজ্ঞায়িত।
- তারপর, আপনি দুটি পদ্ধতিতে গ্রেডিয়েন্টের শুরু এবং স্টপ পয়েন্ট সংজ্ঞায়িত করেছেন: 0 থেকে 359 ডিগ্রি মধ্যে লাইনের কোণ, 0 ডিগ্রী সোজা আপ নির্দেশ করে। অথবা "পাশ বা কোণে" ফাংশনের সাথে, যেমন বাম, ডান, নীচের এবং উপরে। এই পরবর্তী পৃষ্ঠায় আরও বিস্তারিত ব্যাখ্যা করা হবে। আপনি যদি এইগুলি ছেড়ে যান, তাহলে গ্রেডিয়েন্টটি উপরিভাগের নীচের অংশে প্রবাহিত হবে।
- তারপর আপনি রঙ স্টপ সংজ্ঞায়িত। আপনি রং কোড এবং একটি ঐচ্ছিক শতাংশ সঙ্গে রং স্টপ সংজ্ঞায়িত। শতাংশটি সেই ব্রাউজারটিকে বলে যে লাইনটি যে রঙের সাথে শুরু বা শেষ হয়ে যায়। ডিফল্ট রেখা বরাবর একইভাবে রং স্থাপন করা হয় আপনি পৃষ্ঠা 3 উপর রঙ স্টপ সম্পর্কে আরও জানতে হবে
তাই, CSS3 এর সাথে উপরের গ্রেডিয়েন্টকে সংজ্ঞায়িত করতে, আপনি লিখুন:
রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
এবং এটি লিখুন একটি DIV পটভূমি হিসাবে এটি সেট:
div {
ব্যাকগ্রাউন্ড-ইমেজ: রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%;
}
CSS3 রৈখিক গ্রেডিয়েন্টের জন্য ব্রাউজার এক্সটেনশান
ক্রস-ব্রাউজার কাজ করার জন্য আপনার গ্রেডিয়েন্ট পেতে, আপনাকে ব্রাউজার এক্সটেনশানগুলির জন্য ব্রাউজার এক্সটেনশান এবং ইন্টারনেট এক্সপ্লোরার 9 এবং নিম্নের একটি ফিল্টার (আসলে 2 ফিল্টার) ব্যবহার করতে হবে। এই সমস্ত আপনার গ্র্যাডিয়েন্ট সংজ্ঞায়িত করতে একই উপাদান গ্রহণ (আপনি কেবল IE মধ্যে 2-রঙ গ্রেডিয়েন্ট সংজ্ঞায়িত করতে পারেন ছাড়া)।
মাইক্রোসফ্ট ফিল্টার এবং এক্সটেনশান - ইন্টারনেট এক্সপ্লোরারটি সমর্থনের জন্য সবচেয়ে চ্যালেঞ্জিং, কারণ আপনি বিভিন্ন ব্রাউজার সংস্করণ সমর্থন করতে তিনটি ভিন্ন লাইন প্রয়োজন। উপরের ধূসর সাদা গ্রেডিয়েন্ট পেতে আপনি লিখতে পারবেন:
/ * IE 5.5-7 * /
ফিল্টার: প্রজেক্ট: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', শেষ কালারস্ট্রট = '# ফাফফফ', গ্রেডিয়েন্ট টাইপ = 1);
/ * IE 8-9 * /
-এমএস-ফিল্টার: "প্রোগিড: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', শেষের কোলরস্ট্র = '# ফাফফফ', গ্রেডিয়েন্ট টাইপ = 1)";
/ * IE 10 * /
-মাস-রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
মোজিলা এক্সটেনশন -সমাজ-এক্সটেনশানটি CSS3 বৈশিষ্ট্যের মতো কাজ করে, যেমন- মোজ এক্সটেনশন। ফায়ারফক্সের উপরের গ্রেডিয়েন্টটি পেতে, লিখুন:
-মোজ-রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
অপেরা এক্সটেনশান -এ -এক্সটেনশন অপেরা 11.1+ এ গ্রেডিয়েন্ট যোগ করে। উপরের গ্রেডিয়েন্ট পেতে, লিখুন:
-O- রৈখিক- গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
ওয়েবকিট এক্সটেনশান -সাবকিত-এক্সটেনশানটি CSS3 সম্পদের মতো অনেক কাজ করে। Safari 5.1+ বা Chrome 10+ এর জন্য উপরের গ্রেডিয়েন্টকে সংজ্ঞায়িত করতে আপনি লিখেছেন:
-ওয়েবকিট-রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
ওয়েবকিট এক্সটেনশনের একটি পুরোনো সংস্করণ আছে যা Chrome 2+ এবং Safari 4+ এর সাথে কাজ করে। এটিতে আপনি গ্র্যাডিয়েন্টের ধরনকে মূল্যের পরিবর্তে সম্পত্তি হিসাবে উল্লেখ করেছেন। এই এক্সটেনশন দিয়ে সাদা গ্রেডিয়েন্টে ধূসর পেতে, লিখুন:
-ওয়েবকিট-গ্রেডিয়েন্ট (রৈখিক, বাম শীর্ষ, ডান শীর্ষ, রঙ-স্টপ (0%, # 999999), রঙ-স্টপ (100%, # টিফাফফফ));
সম্পূর্ণ CSS3 রৈখিক গ্রেডিয়েন্ট CSS কোড
পূর্ণ ক্রস-ব্রাউজারের সহায়তায় আপনি উপরের ধূসর সাদা গ্রেডিয়েন্ট পেতে পারেন এমন ব্রাউজারগুলির জন্য ফ্লেব্যাকের কঠিন রঙ অন্তর্ভুক্ত করা উচিত যা গ্রেডিয়েন্ট সমর্থন করে না, এবং সর্বশেষ আইটেমগুলি ব্রাউজারগুলির জন্য CSS3 স্টাইল হওয়া উচিত যা সম্পূর্ণরূপে সঙ্গতিপূর্ণ। সুতরাং, আপনি লিখুন:
পটভূমি: # 999999;
পটভূমি: -মোজ-লিনিয়ার-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
ব্যাকগ্রাউন্ড: ওয়েবকাইট-গ্রেডিয়েন্ট (রৈখিক, বাম শীর্ষ, ডানদিকে, রঙ-স্টপ (0%, # 999999), রঙ-স্টপ (100%, # টিফফফফ));
পটভূমি: - ওয়েবকিত-রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
পটভূমি: -এ-রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
পটভূমি: -মাস-রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
ফিল্টার: প্রজেক্ট: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', শেষ কালারস্ট্রট = '# ফাফফফ', গ্রেডিয়েন্ট টাইপ = 1);
-এমএস-ফিল্টার: প্রোগিড: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', শেষ কলাম = '# ফাফফফ', গ্রেডিয়েন্ট টাইপ = 1);
পটভূমি: রৈখিক-গ্রেডিয়েন্ট (বাম, # 999999 0%, #ffffff 100%);
এই টিউটোরিয়ালের পরবর্তী পৃষ্ঠাগুলি আরও বিস্তারিতভাবে একটি গ্রেডিয়েন্টের অংশগুলি ব্যাখ্যা করে এবং শেষ পৃষ্ঠায় আপনাকে একটি সরঞ্জামের নির্দেশ দেয় যা CSS3 গ্রেডিয়েন্টগুলি স্বয়ংক্রিয়ভাবে তৈরি করার একটি চমৎকার উপায়।
শুধু সিএসএস ব্যবহার করে এই রৈখিক গ্রেডিয়েন্ট কাজটি দেখুন।
02 এর 04
ডিয়াগনাল গ্রেডিয়েন্ট তৈরি করা হচ্ছে-গ্রেডিয়েন্টের এঙ্গেল
শুরু এবং স্টপ পয়েন্ট গ্রেডিয়েন্ট কোণ নির্ধারণ। সর্বাধিক রৈখিক গ্রেডিয়েন্টগুলি শীর্ষ থেকে নীচে বা বাম থেকে ডানে কিন্তু একটি বৃত্তাকার লাইনের উপর সরানো একটি গ্রেডিয়েন্ট তৈরি করা সম্ভব। এই পৃষ্ঠার চিত্রটি একটি সরল গ্রেডিয়েন্ট দেখায় যা ইমেজ জুড়ে ডানদিকে বাম থেকে 45 ডিগ্রির কোণে চলে আসে।
গ্রেডিয়েন্ট লাইন নির্ধারণ করতে কোণ
কোণটি উপাদানটির একটি কাল্পনিক বৃত্তের একটি রেখা। 0deg পয়েন্ট, ডান থেকে 90deg পয়েন্ট, 180deg পয়েন্ট নিচে, এবং 270deg পয়েন্ট বাম দিকে আপনি 0 থেকে 359 ডিগ্রি পর্যন্ত কোনও কোণকে সংজ্ঞায়িত করতে পারেন।
আপনি একটি স্কয়ারে, 45 ডিগ্রি কোণের উপরের বাম কোণ থেকে নীচের ডানদিকে সরানো, কিন্তু একটি আয়তক্ষেত্রের মধ্যে শুরু এবং শেষ পয়েন্ট আকৃতি বাইরে সামান্য, যেহেতু আপনি ইমেজ দেখতে পারেন।
একটি তির্যক গ্রেডিয়েন্ট নির্ধারণ করতে আরও সাধারণ উপায় হল একটি কোণ নির্ধারণ করা, যেমন উপরের ডান এবং গ্রেডিয়েন্ট যে কোণ থেকে বিপরীত কোণে সরানো হবে। আপনি নিম্নোক্ত কীওয়ার্ডগুলির সাথে শুরু করা অবস্থানটি সংজ্ঞায়িত করতে পারেন:
- শীর্ষ
- অধিকার
- পাদ
- বাম
- কেন্দ্র
এবং তারা আরো নির্দিষ্ট হতে মিলিত হতে পারে, যেমন:
- উপরের ডানে
- উপরে বাঁদিকে
- শীর্ষ কেন্দ্র
- নিচের ডানে
- নিচে বামে
- নীচে কেন্দ্র
- ডান কেন্দ্রে
- বাম কেন্দ্র
এখানে সিডি একটি গ্রেডিয়েন্ট জন্য অনুরূপ একটি চিত্রিত, লাল সাদা উপরে ডান প্রান্ত থেকে বাম নীচে চলে যাওয়া:
পটভূমি: ## 901এ 1C;
ব্যাকগ্রাউন্ড-ইমেজ: -মোজ-রৈখিক-গ্রেডিয়েন্ট (ডানদিকে, # 901এ 1C 0%, # এফএফএফএফএফএফ 100%);
ব্যাকগ্রাউন্ড-ইমেজ: -ওয়েবকিট-গ্রেডিয়েন্ট (রৈখিক, ডান শীর্ষ, বামদিকের নীচে, রঙ-স্টপ (0, # 901 এ 1 সি), রঙ-স্টপ (1, # ফিফাফএফএফ));
পটভূমি: - ওয়েবকিত-রৈখিক-গ্রেডিয়েন্ট (ডানদিকে উপরে, # 901 A1C 0%, #ffffff 100%);
পটভূমি: -এ-রৈখিক-গ্রেডিয়েন্ট (ডানদিকে, # 901 A1C 0%, #ffffff 100%);
পটভূমি: -মাস-রৈখিক-গ্রেডিয়েন্ট (ডানদিকে, # 901 A1C 0%, #ffffff 100%);
পটভূমি: রৈখিক-গ্রেডিয়েন্ট (ডানদিকে, # 901 A1C 0%, #ffffff 100%);
আপনি এই উদাহরণে কোন IE ফিল্টার আছে লক্ষ্য করা আছে থাকতে পারে। এটি শুধুমাত্র IE ফিল্টারের দুটি ধরনের অনুমোদন করে: উপরে থেকে নীচে (ডিফল্ট) এবং বাম থেকে ডানে (গ্রেডিয়েন্ট টাইপ = 1 সুইচ সহ)।
শুধু সিএসএস ব্যবহার করে এই তির্যক রৈখিক গ্রেডিয়েন্টের কাজটি দেখুন।
04 এর 03
রঙ স্টপ
CSS3 রৈখিক গ্রেডিয়েন্টগুলির সাহায্যে আপনি আপনার গ্রেডিয়েন্টে একাধিক রং যোগ করতে পারেন এমনকি ফ্যানিশায়ার প্রভাবও তৈরি করতে পারেন। এই রংগুলি যোগ করার জন্য, আপনি কমা দ্বারা পৃথক করা, আপনার সম্পত্তি শেষে অতিরিক্ত রং যোগ করুন আপনি অন্তর্ভুক্ত করা উচিত যেখানে লাইন উপর রং শুরু বা পাশাপাশি শেষ হবে।
ইন্টারনেট এক্সপ্লোরার ফিল্টার শুধুমাত্র দুটি রঙ স্টপকে সমর্থন করে, তাই আপনি যখন এই গ্রেডিয়েন্ট তৈরি করবেন, তখন আপনি শুধুমাত্র প্রথম এবং দ্বিতীয় রংগুলি প্রদর্শন করতে চান যা আপনি প্রদর্শন করতে চান।
এখানে 3-রঙের গ্রেডিয়েন্টের জন্য CSS রয়েছে:
পটভূমি: #ffffff;
পটভূমি: -মোজ-রৈখিক-গ্রেডিয়েন্ট (বাম, #ffffff 0%, # 901 এ 1 সি 51%, #ffffff 100%);
ব্যাকগ্রাউন্ড: ওয়েবকাইট-গ্রেডিয়েন্ট (রৈখিক, বাম শীর্ষ, ডান শীর্ষ, রঙ-স্টপ (0%, # টিফাফফফ), রঙ-স্টপ (51%, # 901 এ 1 সি), রঙ-স্টপ (100%, # ফাফফফ));
পটভূমি: - ওয়েবকিত-রৈখিক-গ্রেডিয়েন্ট (বাম, #ffffff 0%, # 901 এ 1 সি 51%, # ফাফফফ 100%);
পটভূমি: -এ-রৈখিক-গ্রেডিয়েন্ট (বাম, #ffffff 0%, # 901 এ 1 সি 51%, # ফাফফফ 100%);
পটভূমি: -মাস-রৈখিক-গ্রেডিয়েন্ট (বাম, #ffffff 0%, # 901 এ 1 সি 51%, # ফাফফফ 100%);
ফিল্টার: প্রজেক্ট: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', গ্রেডিয়েন্ট টাইপ = 1);
পটভূমি: রৈখিক-গ্রেডিয়েন্ট (বাম, #ffffff 0%, # 901 এ 1 সি 51%, # ফাফফফ 100%);
শুধু সিএসএস ব্যবহার করে তিনটি রং স্টপের সাথে এই রৈখিক গ্রেডিয়েন্টটি দেখুন।
04 এর 04
বিল্ডিং গ্রেডিয়েন্ট সহজ করুন
আমি আপনাকে gradients নির্মাণ করতে সাহায্য করার জন্য সুপারিশ দুটি সাইট আছে, তাদের প্রতিটি বেনিফিট এবং দুর্নীতি আছে তাদের, আমি এখনো সবকিছু আছে যা একটি গ্রেডিয়েন্ট বিল্ডার পাওয়া যায় নি।
আলটিমেট CSS গ্রেডিয়েন্ট জেনারেটর
এই গ্রেডিয়েন্ট জেনারেটরটি খুবই জনপ্রিয় কারণ এটি ফটোশপের প্রোগ্রামগুলিতে গ্রেডিয়েন্ট বিল্ডারের অনুরূপভাবে কাজ করে। আমিও এটি পছন্দ করি কারণ এটি আপনাকে সমস্ত CSS এক্সটেনশন দেয়, শুধু ওয়েবকিট এবং মোজিলা নয়। এই উত্পাদক সঙ্গে সমস্যা হল যে এটি শুধুমাত্র অনুভূমিক এবং উল্লম্ব গ্রেডিয়েন্ট সমর্থন করে। যদি আপনি তির্যক গ্রেডিয়েন্ট করতে চান, তবে আপনাকে অন্য জেনারেটর যেতে হবে যা আমি সুপারিশ করছি।
CSS3 গ্রেডিয়েন্ট জেনারেটর
এই জেনারেটর সম্পর্কে প্রথম এক তুলনায় একটু বেশি সময় নিয়েছে, কিন্তু এটি একটি তির্যক দিকে দিক পরিবর্তন সমর্থন করে।
যদি আপনি অন্য CSS গ্রেডিয়েন্ট জেনারেটর জানেন যে আপনি এই চেয়ে ভাল পছন্দ করেন, তবে দয়া করে আমাদের জানান ।