CSS গ্রেডিয়েন্ট সম্পর্কে কিছু লিঙ্ক

প্রতিবার একবারে, ব্লগিং zeitgiest একটি নির্দিষ্ট বিষয়ের চারপাশে সমন্বিত বলে মনে হচ্ছে এবং এটি আমার বুকমার্ক ফোল্ডারে সংরক্ষিত নিবন্ধগুলির মতো একটি কথোপকথন করছে৷ সেখানে বসে থাকা কথোপকথনটি এখন সিএসএস গ্রেডিয়েন্ট সম্পর্কে এবং আমি ভেবেছিলাম যে আমি আরও আকর্ষণীয় কিছু অংশ লিঙ্ক করব।

• দিন 22: কনিক গ্রেডিয়েন্ট — ম্যানুয়েল মাতুজুভিচ আধুনিক CSS সম্পর্কে তার 21-দিনের সিরিজের 100 তম দিনে কনিক গ্রেডিয়েন্টের দিকে নজর দিয়েছেন, রঙ, কোণ, স্থান নির্ধারণ এবং রঙের স্টপগুলিতে একটি চমৎকার উচ্চ-স্তরের চেহারা প্রদান করেছেন। তারপর দিবস 22, তিনি এটি ব্যবহার করেন ::backdrop ছদ্ম-উপাদান। (প্রসঙ্গক্রমে, টুইটার অপ্রত্যাশিতভাবে তার অ্যাকাউন্ট স্থগিত - আসুন আমরা যদি পারি সেই জাহাজটিকে ঠিক করতে সাহায্য করি।)
• আপনি কি সত্যিই CSS রেডিয়াল-গ্রেডিয়েন্ট বোঝেন? - প্যাট্রিক ব্রসেট এখানে গাইড-যোগ্য কাজ করেছে এবং আমি সত্যই এখনও এটির মাধ্যমে আমার পথ কাজ করছি। কিন্তু আমি আগে থেকেই তার স্পষ্ট ব্যাখ্যা এবং কিছুর ডেমোর প্রশংসা করি যা আমি এখনও ম্লান করি, যেমন রেডিয়াল গ্রেডিয়েন্টের আকার এবং আকৃতির জন্য কীওয়ার্ড। আমি ইতিমধ্যে আমাদের নিজেদের মধ্যে এই লিঙ্ক করছি CSS গ্রেডিয়েন্ট গাইড!
• অত্যন্ত কাস্টমাইজযোগ্য পটভূমি গ্রেডিয়েন্ট — আরে, রেডিয়াল গ্রেডিয়েন্টের কথা বলছি, স্কট ভান্দেহেএকাধিক রঙের স্টপ সহ একটির জন্য এর রেসিপি গত সপ্তাহে রাউন্ড তৈরি করেছে। তার চ্যালেঞ্জ ছিল এমন একটি গ্রেডিয়েন্ট প্যাটার্ন তৈরি করা যা বিভিন্ন রঙের বৈচিত্রকে সমর্থন করতে পারে, যা সাধারণত CSS ক্লাসের একটি গরম জগাখিচুড়ি এবং প্রতিটি বৈচিত্রের জন্য রঙের মান ব্যবহার না করলে কাস্টম বৈশিষ্ট্য. এইভাবে, তিনি প্রতিটি রঙের স্টপের জন্য বিভিন্ন রঙ এবং স্থান নির্ধারণের মানগুলির জন্য একটি কাস্টম সম্পত্তি বরাদ্দ করতে পারেন, তারপর কেবলমাত্র প্রেক্ষাপটের উপর নির্ভর করে মানগুলি আপডেট করতে পারেন। এবং আরো কি যে উপায় কাস্টম বৈশিষ্ট্য জাভাস্ক্রিপ্ট দিয়ে আপডেট করা যেতে পারে স্কট অনুমোদিত তার গ্রেডিয়েন্ট প্যাটার্ন কাস্টমাইজ করার জন্য একটি টুল তৈরি করুন, যা পোস্টের শেষে উদারভাবে শেয়ার করা হয়।
• CSS হাফটোন প্যাটার্নস - মিশেল বার্কার আনা টিউডরের "হাফটোন" প্যাটার্নগুলির একটি বিশদ ভাঙ্গন সহ। প্রভাবটি পুরানো স্কুল সংবাদপত্রের ডটেড কালি প্রিন্টের মতো। যখন আনা ব্যবহার করে Houdini অ্যানিমেশন এবং হোভার প্রভাবগুলির জন্য হুডের নীচে, মিশেল বিশেষভাবে হাফটোন প্রভাব নিজেই দেখেন এবং এটি কীভাবে একটি রেডিয়াল গ্রেডিয়েন্টের সাথে তৈরি করা হয়েছে। আমি বিশেষ করে মিশেল যেভাবে দেখায় বিন্দুর একটি সরল গ্রিড থেকে প্যাটার্নটি কিছুটা স্তব্ধ হয়ে যায় সেখানে কীভাবে যেতে হয় তা পছন্দ করি। এবং তিনি একটি সঙ্গে প্রভাব punctuates কিভাবে দেখতে শেষ পর্যন্ত চারপাশে লাঠি mask-image যা একটি বিবর্ণ প্রভাব তৈরি করতে একটি লিনিয়ার গ্রেডিয়েন্ট ব্যবহার করে। আমি এই প্যাটার্ন সঙ্গে একটু riffed, এছাড়াও, এবং একটি ঝরঝরে কালি দাগ ফিল্টার মত দেখায় যে কিছু দিয়ে ক্ষত.
• একটি ড্যাশিং Navbar সমাধান — এরিক মেয়ারকে একটি মেনুর জন্য একটি আকর্ষণীয় ডিজাইন চ্যালেঞ্জ দেওয়া হয়েছিল যেখানে একটি ডটেড লাইন "বর্তমান পৃষ্ঠা" লিঙ্ক থেকে বেরিয়ে আসে এবং বিষয়বস্তু কন্টেইনারের বাম প্রান্ত বরাবর একটি বৃহত্তর ডটেড সীমানার অংশ হয়ে যায়। এরিক সর্বদা একটি দুর্দান্ত উদাহরণ কিভাবে ফ্রন্ট-এন্ড ডেভেলপারের মত ভাবতে হয়, এবং তিনি এখানে এটি করেছেন কারণ তিনি একটি রৈখিক গ্রেডিয়েন্ট ব্যবহার করে যে বিকল্প পথটি নিয়েছিলেন তা বর্ণনা করেছেন যখন তিনি সেটিংয়ের মানক পদ্ধতির সাথে একটি স্নাগ আঘাত করেছিলেন border-style: dotted উপাদানের উপর।
• মাস্কড গ্রেডিয়েন্ট ড্যাশড লাইন — এরিক সেই শেষ লিঙ্কটির ফলো-আপের সাথে দেখায় যে কীভাবে তিনি বাম সীমানার ড্যাশগুলিকে একটি রাস্টার চিত্রের ড্যাশের সাথে সংযুক্ত করেছিলেন, তবে কীভাবে তার পারসনিকটি ডিজাইনের চোখ তাকে তার সমাধান পরিবর্তন করতে রাজি করেছিল তার নিম্ন রেজোলিউশনটি নকল করতে। ছবির ড্যাশ দুটি পুনরাবৃত্তি করা রৈখিক পটভূমি গ্রেডিয়েন্ট ব্যবহার করে a mask-image ব্যাকগ্রাউন্ড গ্রেডিয়েন্টে। তাই nerdy এবং মহান!