একটি আঁকাবাঁকা গ্রিড বিভ্রম নির্মাণ

CSS এর সাথে একটি অপটিক্যাল বিভ্রম পুনরায় তৈরি করার উপায়গুলির একটি মজার অন্বেষণ৷

অ্যাডাম আর্গিল

এই পোস্টে আমরা একটু মজা করতে যাচ্ছি! এই অপটিক্যাল বিভ্রম অর্জনের জন্য 100টি উপায় থাকতে হবে, এবং আমি শুধুমাত্র আপনার সাথে আমার চিন্তা শেয়ার করতে যাচ্ছি, কিন্তু আপনার শৈলী চেষ্টা করার জন্য আপনাকে উত্সাহিত করব। ডেমো চেষ্টা করুন এবং উৎস দেখুন .

আপনি যদি ভিডিও পছন্দ করেন তবে এখানে এই পোস্টটির একটি YouTube সংস্করণ রয়েছে:

ওভারভিউ

এই বিভ্রমের নাম ক্যাফে ওয়াল ইলিউশন । কোথাও কোন আঁকাবাঁকা রেখা নেই, কিন্তু আমাদের চোখ তির্যক অনুধাবন করে। এটা বিশ্বাস করা কঠিন হতে পারে, কিন্তু এটি পুনর্নির্মাণ অবশ্যই আপনাকে বিভ্রমের মধ্য দিয়ে দেখতে সাহায্য করবে।

মার্কআপ

এর জন্য HTML হল সোজা সারি এবং কলাম। <body> হল বাচ্চাদের জন্য <div class="row"> সম্বলিত ধারক। প্রতিটি সারিতে পাঁচটি <div class="square"> উপাদান থাকে।

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

শৈলী

আমি সিএসএস গ্রিড বেছে নিয়েছি কারণ এটি সারিগুলির উপস্থাপনা শৈলীর সাথে মানানসই বলে মনে হয়েছিল, এবং এতে justify-content রয়েছে যা সারি শিশুদের অফসেট করার একটি ভাল উপায় বলে মনে হয়েছিল।

শরীরের শৈলী

বডি স্টাইল দিয়ে শুরু করে, সারি লেআউট প্রদান করতে আমি display: grid এবং grid-auto-rows ব্যবহার করেছি। সারির আকারের জন্য আপনি calc() দেখছেন তা প্রতিটি সারির সীমানা বিবেচনা করে এবং প্রভাবটিকে সম্পূর্ণ ভিউপোর্টে ফিট করতে সহায়তা করে।

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

সারি শৈলী

এখানে আমি আবার গ্রিড বেছে নিয়েছি, কিন্তু এর সাথে সারি তৈরি করার পরিবর্তে আমি কলামের দিক পরিবর্তন করতে grid-auto-flow: column ব্যবহার করেছি। আমি তারপর কলামের আকার নির্ধারণ করি এবং সারিতে একটু ইনলাইন প্যাডিং যোগ করি, যাতে বাক্সগুলি ভিউপোর্ট প্রান্তে চলে না যায়। তারপর আমি নির্দিষ্ট সারি টার্গেট করি এবং বিষয়বস্তুটিকে center বা end পর্যন্ত ন্যায্যতা দিই, এমন অফসেট তৈরি করে যা বিভ্রমকে জ্বালাতন করে।

.row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9vw;
  padding-inline: 4vw;
  gap: 10vw;
  background: white;
}

.row:nth-child(even) {
  justify-content: center;
}

.row:nth-child(3n) {
  justify-content: end;
}

বর্গাকার শৈলী

এখন যা বাকি আছে তা হল বর্গক্ষেত্রের রঙ পরিবর্তন করা এবং একটি সীমানা যোগ করা:

.square {
  border-inline: 4px solid gray;
  background: black;
}

উপসংহার

এখন আপনি জানেন যে আমি কীভাবে এটি করেছি, আপনি কীভাবে করবেন?! 🙂 ভাসছে? ফ্লেক্সবক্স? গ্রেডিয়েন্ট?!

আসুন আমাদের পদ্ধতির বৈচিত্র্য আনুন এবং ওয়েবে তৈরি করার সমস্ত উপায় শিখি।

একটি ডেমো তৈরি করুন, আমাকে লিঙ্কগুলি টুইট করুন এবং আমি নীচের সম্প্রদায়ের রিমিক্স বিভাগে এটি যুক্ত করব!

কমিউনিটি রিমিক্স