একটি অদ্ভুত CSS গ্রেডিয়েন্ট বাগ থেকে স্ট্যাটিক শব্দ করা

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

আপনার কি মনে আছে কোন সিগন্যাল ছাড়া পুরানো টিভিতে স্থির শব্দ? নাকি সিগন্যাল খারাপ হলে ছবি বিকৃত হয়? যদি একটি টিভি সিগন্যালের ধারণা আপনার আগে থেকে থাকে, তাহলে এখানে একটি GIF আছে যা দেখায় যে আমি ঠিক কী বলতে চাইছি।

ভিউ ইমেজ (অটো প্লেয়িং মিডিয়া রয়েছে)

হ্যাঁ, আমরা শুধুমাত্র CSS ব্যবহার করে এরকম কিছু করতে যাচ্ছি। আমরা যা তৈরি করছি তা এখানে:

আমরা কোডটি খনন শুরু করার আগে, আমি বলতে চাই যে আমি আপনাকে যে পদ্ধতিটি দেখাতে যাচ্ছি তার চেয়ে স্ট্যাটিক নয়েজ ইফেক্ট তৈরি করার আরও ভাল উপায় রয়েছে। আমরা SVG ব্যবহার করতে পারি, , দ্য filter সম্পত্তি, ইত্যাদি প্রকৃতপক্ষে, জিমি চিয়ন একটি লিখেছেন ভাল নিবন্ধ SVG এর সাথে এটি কীভাবে করা যায় তা দেখাচ্ছে।

আমি এখানে যা করব তা হল গ্রেডিয়েন্ট সহ একটি বাগ ব্যবহার করার কিছু কৌশল অন্বেষণ করার জন্য একটি CSS পরীক্ষা। আপনি মজার জন্য আপনার পাশের প্রকল্পগুলিতে এটি ব্যবহার করতে পারেন তবে SVG ব্যবহার করা একটি বাস্তব প্রকল্পের জন্য পরিষ্কার এবং আরও উপযুক্ত। এছাড়াও, প্রভাবটি ব্রাউজার জুড়ে ভিন্নভাবে আচরণ করে, তাই আপনি যদি এগুলি পরীক্ষা করে দেখেন তবে সেগুলি Chrome, Edge বা Firefox-এ দেখাই ভাল৷

এর কিছু শব্দ করা যাক!

এই শব্দের প্রভাব তৈরি করতে আমরা ব্যবহার করতে যাচ্ছি… গ্রেডিয়েন্ট! না, এমন কোনো গোপন উপাদান বা নতুন সম্পত্তি নেই যা এটি ঘটায়। আমরা ইতিমধ্যেই আমাদের CSS টুলবক্সে থাকা জিনিসগুলি ব্যবহার করতে যাচ্ছি!

"কৌতুক" এই সত্যের উপর নির্ভর করে যে গ্রেডিয়েন্ট অ্যান্টি-অ্যালিয়াসিংয়ে খারাপ। আপনি হার্ড স্টপ রং ব্যবহার করার সময় আমরা পেতে জ্যাগড প্রান্ত এই ধরনের জানেন? হ্যাঁ, আমি বেশিরভাগ ক্ষেত্রে তাদের সম্পর্কে কথা বলি আমার নিবন্ধ কারণ এগুলি কিছুটা বিরক্তিকর এবং জিনিসগুলিকে মসৃণ করার জন্য আমাদের সর্বদা কিছু পিক্সেল যোগ বা সরাতে হবে:

আপনি দেখতে পাচ্ছেন, দ্বিতীয় বৃত্তটি প্রথমটির চেয়ে ভাল রেন্ডার করে কারণ একটি ক্ষুদ্র পার্থক্য রয়েছে (0.5%) গ্রেডিয়েন্টে দুটি রঙের মধ্যে একটি সোজা-আপ হার্ড রঙ ব্যবহার না করে প্রথম বৃত্তের মতো পূর্ণ সংখ্যার মান ব্যবহার করে থামুন।

এখানে আরেকটি চেহারা, এই সময় একটি ব্যবহার করে conic-gradient যেখানে ফলাফল আরো সুস্পষ্ট:

আমি এই ডেমো তৈরি করার সময় একটি আকর্ষণীয় ধারণা আমাকে আঘাত করেছিল। সব সময় বিকৃতি ঠিক না করে উল্টোটা করার চেষ্টা কেন? আমি কোন ধারণা কি ঘটবে কিন্তু এটা একটি মজার আশ্চর্য ছিল! আমি কনিক গ্রেডিয়েন্ট মান নিয়েছি এবং দুর্বল অ্যান্টি-অ্যালাইজিং ফলাফলগুলিকে আরও খারাপ দেখাতে সেগুলি কমাতে শুরু করেছি।

শেষটা কতটা খারাপ দেখেছ? এটা মাঝখানে এক ধরনের scrambled এবং কিছুই মসৃণ হয় না. আসুন এটিকে ছোট মান সহ পূর্ণ-স্ক্রীন করি:

আমি মনে করি আপনি দেখতে পাচ্ছেন যে এটি কোথায় যাচ্ছে। আমরা একটি অদ্ভুত বিকৃত ভিজ্যুয়াল পাই যখন আমরা একটি গ্রেডিয়েন্টে শক্ত রঙের স্টপের জন্য খুব ছোট দশমিক মান ব্যবহার করি। আমাদের কোলাহল জন্মে!

আমরা যে দানাদার আওয়াজ চাই তা থেকে আমরা এখনও দূরে রয়েছি কারণ আমরা এখনও প্রকৃত কনিক গ্রেডিয়েন্ট দেখতে পাচ্ছি। কিন্তু আমরা মান কমাতে পারি খুব, খুব ছোট - যেমন 0.0001% - এবং হঠাৎ করে আর কোন গ্রেডিয়েন্ট নেই কিন্তু খাঁটি দানাদারতা:

টাডা ! আমাদের একটি নয়েজ ইফেক্ট আছে এবং এর জন্য যা লাগে তা হল একটি CSS গ্রেডিয়েন্ট। আমি বাজি ধরে বলতে পারি যদি আমি এটি ব্যাখ্যা করার আগে আপনাকে এটি দেখাতাম, আপনি কখনই বুঝতে পারবেন না যে আপনি গ্রেডিয়েন্টের দিকে তাকিয়ে আছেন। এটি দেখতে আপনাকে গ্রেডিয়েন্টের কেন্দ্রে খুব সাবধানে দেখতে হবে।

আমরা এর অবস্থান সামঞ্জস্য করার সময় গ্রেডিয়েন্টের আকারকে খুব বড় করে এলোমেলোতা বাড়াতে পারি:

গ্রেডিয়েন্ট একটি নির্দিষ্ট প্রয়োগ করা হয় 3000px বর্গক্ষেত্র এবং স্থাপিত 60% 60% স্থানাঙ্ক এই ক্ষেত্রে আমরা খুব কমই এর কেন্দ্র লক্ষ্য করতে পারি। রেডিয়াল গ্রেডিয়েন্টের সাথেও একই কাজ করা যেতে পারে:

এবং জিনিসগুলিকে আরও এলোমেলো করতে (এবং একটি বাস্তব শব্দ প্রভাবের কাছাকাছি) আমরা গ্রেডিয়েন্ট এবং ব্যবহার উভয়ই একত্রিত করতে পারি background-blend-mode জিনিস মসৃণ করতে:

আমাদের শব্দ প্রভাব নিখুঁত! এমনকি যদি আমরা প্রতিটি উদাহরণের দিকে ঘনিষ্ঠভাবে তাকাই, সেখানে উভয় গ্রেডিয়েন্টের কোনও চিহ্ন নেই, বরং সুন্দর দানাদার স্ট্যাটিক শব্দ। আমরা এইমাত্র সেই অ্যান্টি-আলিয়াসিং বাগটিকে একটি চটকদার বৈশিষ্ট্যে পরিণত করেছি!

এখন আমাদের কাছে এটি আছে, আসুন কয়েকটি আকর্ষণীয় উদাহরণ দেখি যেখানে আমরা এটি ব্যবহার করতে পারি।

অ্যানিমেটেড কোন টিভি সংকেত

ডেমোতে ফিরে যাওয়া যা আমরা শুরু করেছি:

আপনি যদি কোড চেক করেন, আপনি দেখতে পাবেন যে আমি গ্রেডিয়েন্টের একটিতে একটি CSS অ্যানিমেশন ব্যবহার করছি। এটা সত্যিই যে হিসাবে সহজ! আমরা যা করছি তা হল কনিক গ্রেডিয়েন্টের অবস্থানকে একটি বিদ্যুতের দ্রুত সময়ের মধ্যে সরানো (.1s) এবং এই আমরা কি পেতে!

আমি এক-ডিভ সিএসএস আর্ট চ্যালেঞ্জে এই একই কৌশলটি ব্যবহার করেছি:

দানাদার ইমেজ ফিল্টার

আরেকটি ধারণা হল একটি পুরানো সময়ের-ওয়াই চেহারা পেতে একটি ছবিতে শব্দ প্রয়োগ করা। গোলমাল ছাড়াই দেখতে প্রতিটি চিত্রকে ঘোরান৷

আমি একটি ছদ্ম-উপাদানে শুধুমাত্র একটি গ্রেডিয়েন্ট ব্যবহার করছি এবং এটি চিত্রের সাথে মিশ্রিত করছি, ধন্যবাদ mix-blend-mode: overlay.

আমরা CSS ব্যবহার করলে আমরা আরও মজার প্রভাব পেতে পারি filter সম্পত্তি

এবং যদি আমরা একটি যোগ করি mask মিশ্রণে, আমরা আরও বেশি প্রভাব তৈরি করতে পারি!

দানাদার টেক্সট চিকিত্সা

আমরা পাঠ্যেও এই একই প্রভাব প্রয়োগ করতে পারি। আবার, আমাদের যা দরকার তা হল a এর উপর কয়েকটি শিকলযুক্ত গ্রেডিয়েন্ট background-image এবং তারপর ব্যাকগ্রাউন্ড মিশ্রিত. শুধুমাত্র পার্থক্য হল যে আমরা এর জন্য পৌঁছাচ্ছি background-clip তাই প্রভাব শুধুমাত্র প্রতিটি অক্ষরের সীমানা প্রয়োগ করা হয়.

জেনারেটিভ আর্ট

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

অবশ্যই, আমরা প্রকৃত জেনারেটিভ শিল্প থেকে অনেক দূরে, যার জন্য প্রচুর পরিশ্রম প্রয়োজন। কিন্তু প্রযুক্তিগতভাবে বাগ হিসেবে বিবেচিত এমন কিছু দিয়ে কী অর্জন করা যেতে পারে তা দেখতে এখনও সন্তোষজনক!

দানবের মুখ

একটি শেষ উদাহরণ আমি জন্য তৈরি কোডপেন divtober 2022 সংগ্রহ:

মোড়ক উম্মচন

আমি আশা করি আপনি এই ছোট্ট CSS পরীক্ষাটি উপভোগ করেছেন। আমরা ঠিক কিছু "নতুন" শিখিনি কিন্তু আমরা গ্রেডিয়েন্টের সাথে একটু ব্যঙ্গ নিয়েছি এবং এটিকে মজাদার কিছুতে পরিণত করেছি। আমি আবার বলব: এটি এমন কিছু নয় যা আমি একটি বাস্তব প্রকল্পে ব্যবহার করে বিবেচনা করব কারণ কে জানে কখন বা কখন অ্যান্টি-অ্যালাইজিং সময়ে সময়ে সম্বোধন করা হবে। পরিবর্তে, এটি একটি খুব এলোমেলো, এবং আনন্দদায়ক, বিস্ময়কর ছিল যখন আমি এতে হোঁচট খেয়েছিলাম। এটি নিয়ন্ত্রণ করাও সহজ নয় এবং এটি ব্রাউজার জুড়ে অসামঞ্জস্যপূর্ণ আচরণ করে।

এই বলল, আমি কৌতুহলী হয়ে দেখছি এটা দিয়ে আপনি কি করতে পারেন! আপনি মান নিয়ে খেলতে পারেন, বিভিন্ন স্তর একত্রিত করতে পারেন, a ব্যবহার করতে পারেন filter, বা mix-blend-mode, বা যাই হোক না কেন, এবং আপনি নিশ্চিতভাবে সত্যিই দুর্দান্ত কিছু পাবেন। মন্তব্য বিভাগে আপনার সৃষ্টি শেয়ার করুন — কোন পুরস্কার নেই কিন্তু আমরা একটি সুন্দর সংগ্রহ পেতে পারি!