সিএসএস অপব্যবহার

সিএসএসকে কীভাবে সীমাবদ্ধ করা যায় তার উদাহরণগুলির একটি সংগ্রহ

এটি সব CSS সম্পর্কে। এখানে সমস্ত লেখক হয় জাভাস্ক্রিপ্ট ব্যবহার করতে ভুলে গেছেন বা তারা তাদের ব্রাউজারে এটি অক্ষম করেছিলেন এবং এটিকে আবার সক্ষম করতে পারবেন না; সুতরাং তাদের কেবল খাঁটি সিএসএস ব্যবহার করে কাজ শেষ করতে হয়েছিল।

কিউব প্যাক

আমি ভেবেছিলাম যে এই কিউবগুলি একটি 3 ডি কাজ, তবে লেখক যেমনটি বলেছিলেন যে "তিনি তিনটি জেএস ব্যবহার করতে ভুলে গেছেন" এবং এটি সমস্ত খাঁটি সিএসএস।

ِ অ্যানিমেটেড কিউব প্যাক

আমি এখানে যা সত্যিই পছন্দ করি তা কীভাবে কিউবগুলি ছায়া ফেলে এবং আলোকে প্রতিবিম্বিত করে, এটিকে এমন মনে হয় যেন তারা সত্যই ভাসমান এবং ঘোরানো হয়।

খাঁটি-সিএসএস ফ্রান্সাইন

হ্যাঁ, এটি কোনও তেল চিত্র নয়। এটি সম্পূর্ণ খাঁটি সিএসএস আর্ট।

ফ্রান্সিন পেন্টিং

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

ফ্রান্সিন পেইন্টিং ঘোস্ট (ধন্যবাদ আইই)

একক ডিভ

এই সমস্ত গ্রাফিকগুলি কেবলমাত্র এইচটিএমএল এবং সিএসএসে আঁকা নয়, সেগুলি সমস্তই একটি ডিভ দিয়ে তৈরি করা হয়েছে (আপনি এটি অনুমান করেছিলেন)।

একক ডিভি শিল্পকর্ম

দুর্দান্ত, তবে সে কি একক ডিভ অ্যানিমেট করতে পারে?

অ্যানিমেটেড একক ডিভ

হ্যানয়ের টাওয়ার

হ্যানয়ের বিখ্যাত ধাঁধা টাওয়ার। এটি তিনটি রড এবং বিভিন্ন আকারের বিভিন্ন সংখ্যক ডিস্ক নিয়ে গঠিত যা কোনও রডের উপরে স্লাইড করতে পারে। ধাঁধাটি একটি ডান্ডায় আকারের আরোহী ক্রমে একটি ঝরঝরে স্ট্যাকের ডিস্ক দিয়ে শুরু হয়, শীর্ষে ছোট, এইভাবে একটি শঙ্কু আকার তৈরি করে।

ধাঁধাটির উদ্দেশ্যটি হ'ল নীচের সাধারণ নিয়মগুলি মেনে পুরো স্ট্যাকটিকে অন্য রডে স্থানান্তর করা:

  1. একসাথে কেবল একটি ডিস্ক সরানো যায়।
  2. প্রতিটি পদক্ষেপের মধ্যে একটি স্ট্যাকের থেকে উপরের ডিস্কটি নিয়ে থাকে এবং এটিকে অন্য স্ট্যাকের উপরে বা খালি রডে রাখে।
  3. ছোট ডিস্কের উপরে কোনও ডিস্ক স্থাপন করা যাবে না।

আপনি যখন কোনও ডিস্ক স্ট্যাকের উপর ক্লিক করেন আপনি শীর্ষস্থানীয় সর্বাধিক ডিস্কটি বাছাই করেন, তবে আপনি এটিকে অন্য রডে নিয়ে যেতে পারেন, আপনি কতটা চেষ্টা করে চেষ্টা করেন যে আপনি একটি ছোট ডিস্কের উপরে একটি বড় ডিস্ক রাখতে পারবেন না (গেমের নিয়ম হিসাবে) এবং সমস্ত এটি একটি খাঁটি সিএসএস যাদু।

আমি মনে করি এই গেমটির লেখককে তার সিভিতে দুটি নতুন দক্ষতা যুক্ত করা উচিত একটি গাণিতিক প্রতিভা এবং একজন দীর্ঘ-মনের ব্যক্তি।

মারিও কার্ট গেম

জিরো ইমেজ, জাভাস্ক্রিপ্টের শূন্য লাইন এবং সিএসএসের কয়েকশ লাইন সহ তিনি মারিওকে রাস্তায় নামিয়ে আনতে সক্ষম হন।

যেমনটি আপনি লক্ষ্য করেছেন, এটি মারিও কার্ট গেমটি কখনও সেরা নয়, যেহেতু আপনি কেবলমাত্র অক্ষরের মধ্যে পরিবর্তন করতে পারেন এবং নির্বাচিত চরিত্রটি ডান বা বামে সরাতে পারেন, তবে জাভাস্ক্রিপ্টের একক লাইন ব্যবহার না করেই এটি অর্জন করা এক ধরণের CSS অপব্যবহার যা আমি সত্যিই পছন্দ করি ।

সিএসএসে একটি অনুসন্ধান ইঞ্জিন

এখন ফিরে আসার জন্য আমরা একটি দুর্দান্ত দূরত্ব ভ্রমণ করেছি, তাই কেন একটি সিএসএস অনুসন্ধান ইঞ্জিন তৈরি করবেন না।

সর্বশেষ ভাবনা

যদি আপনি ভাবছেন, তারা খাঁটি সিএসএসে কেন এমন করবে? আমি উত্তর এখানে অনুমান, কারণ তারা পারে।

এখানে চ্যালেঞ্জটি একটি দুর্দান্ত চিত্র তৈরি বা মারিও কার্ট গেমকে ওয়েব সংস্করণ তৈরি করছে না, তবে এখানে চ্যালেঞ্জটি হ'ল এটি এমন একটি সরঞ্জাম ব্যবহার করে তৈরি করা যা আমরা সকলেই পরিচিত এবং এটি ভালভাবে ব্যবহার করতে পারি (সিএসএস), যদিও এই সরঞ্জামটি ডিজাইন করা হয়নি তাই করো.

অবশ্যই, যদি তারা জাভাস্ক্রিপ্ট বা এসভিজি ব্যবহার করে তবে তারা একই রকম ফলাফল বা আরও ভাল ফলাফল কম বেদনাদায়ক উপায়ে অর্জন করতে পারে তবে কম উত্তেজনাপূর্ণ উপায়েও।

এইভাবে তারা কী করতে পারে তা শো-অফ করে এবং দেখায় যে আপনি কোনও সরঞ্জামই ব্যবহার করুন না কেন, আপনার সৃজনশীলতার কোনও সীমা নেই। সরঞ্জামটি সর্বদা একটি সরঞ্জাম থাকবে তবে ডান হাতে এই যাদুটি তৈরি করতে পারে।

আপনার কাছে যদি "সিএসএসকে কীভাবে অপব্যবহার করবেন" এর অন্য কোনও উদাহরণ থাকে তবে দয়া করে মন্তব্যে রাখুন।

পড়ার জন্য আপনাকে ধন্যবাদ.