HTML এবং CSS এর মাধ্যমে আপনার ওয়েবসাইটের জন্য কিভাবে একটি সহজ, সুন্দর UI কার্ড উপাদান ডিজাইন করবেন তা শিখুন। আপনার কার্ডকে খুব বেশি অন্ধকার না করে আপনার টেক্সটকে একটু অতিরিক্ত পপ করার জন্য আপনি একটি লিনিয়ার-গ্রেডিয়েন্ট "ট্রিক" শিখবেন।

একটি UI কার্ড হল একটি UI উপাদান যা ওয়েবসাইটগুলিতে এক ধরনের ক্ষুধার্ত হিসাবে কাজ করে৷ একটি সাধারণ UI কার্ডে পাঠ্য, ফটোগ্রাফি, আইকন এবং এক বা একাধিক ইন্টারেক্টিভ উপাদান (যেমন বোতাম বা লিঙ্ক) থাকে।

UI কার্ডগুলি আপনার প্রয়োজন মতো সহজ বা জটিল হতে পারে৷

আজ আমরা একটি মৃত-সাধারণ UI কার্ড ডিজাইন করছি, এটি হল:

কিভাবে আপনার ওয়েবসাইটের জন্য একটি সহজ এবং সুন্দর UI কার্ড ডিজাইন করবেন

এই UI কার্ডটিতে একটি ল্যান্ডস্কেপের একটি পটভূমি চিত্র, দুটি পাঠ্য উপাদান (শিরোনাম এবং বিবরণ), এবং একটি বড় ক্লিকযোগ্য ইন্টারফেস রয়েছে:পুরো কার্ডটি একটি লিঙ্ক।

আপনি প্রচুর বিনামূল্যে পেতে পারেন Unsplash.com এ সুন্দর ল্যান্ডস্কেপ ফটো।

ধাপ 1:HTML

আপনার নথিতে এই HTML যোগ করুন (<body> এর ভিতরে উপাদান):

<a class="card-link" href="#">
  <div class="card">
    <div class="card-overlay"></div>
    <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" />
    <div class="card-text-container">
      <div class="card-text-wrapper">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>
  </div>
</a>

উপরের এইচটিএমএল মার্কআপের গুরুত্বপূর্ণ অংশটি হল যে আমরা একটি অ্যাঙ্কর উপাদানের ভিতরে পুরো কার্ডটি মোড়ানো করছি। আমরা এই নির্দিষ্ট কার্ডের জন্য এটি করি কারণ আমরা চাই পুরো ইউজার ইন্টারফেসটি একটি বড় ক্লিকযোগ্য লিঙ্ক হতে।

সঠিক ব্লগ পোস্টে অ্যাঙ্কর লিঙ্ক করতে, নিবন্ধ (যে বিষয়বস্তুর সাথে আপনি লিঙ্ক করতে চান) কেবল স্থানধারক বৈশিষ্ট্যটি প্রতিস্থাপন করুন (href="#" ) একটি বাস্তব স্লাগ সহ, উদাহরণস্বরূপ href="/northern-sea-of-denmark" .

ধাপ 2:CSS

প্রথমে, আমি UI কার্ডের উদাহরণের জন্য ব্যবহৃত CSS প্রদান করব, তারপর আমি নীচের কোডের সবচেয়ে গুরুত্বপূর্ণ অংশগুলি ব্যাখ্যা করব:

.card {
  position: relative;
  height: 350px;
  max-width: 400px;
}

.card-thumbnail {
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card-text-container {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-text-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 300px;
  color: white;
}
.card-title {
  font-size: 1.45rem;
  margin-bottom: 0;
}
.card-description {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}

.card-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

সিএসএস কীভাবে কাজ করে:

.card :UI কার্ডকে প্রতিক্রিয়াশীল করতে, এটি সর্বাধিক 400px-এর প্রস্থ পায়৷ এটি কার্ডের প্রস্থকে গতিশীল করে তোলে। এটি কখনই 400px এর চেয়ে বেশি প্রশস্ত হবে না, তবে, স্ক্রিনের প্রস্থ 400px-এর কম হলে এটি স্বয়ংক্রিয়ভাবে স্কেল করে (সংকীর্ণ হয়ে যাবে)। কার্ডের উচ্চতা স্থির (height: 350px ) এবং পর্দার আকার নির্বিশেষে পরিবর্তন হবে না।
.card-thumbnail :কার্ডের অ্যাসপেক্ট রেশিও পরিবর্তিত হলে ব্যাকগ্রাউন্ড ইমেজ যাতে তার অ্যাসপেক্ট রেশিও (স্ট্রেচ) না হারায়, আমরা object-fit: cover ব্যবহার করি . এটি সরানোর চেষ্টা করুন এবং দেখুন কি হয় (ভাল নয়)।
.card-text-container :UI কার্ডটি যে ডিভাইসে দেখা হোক না কেন, পাঠ্য উপাদানের অবস্থান এবং ব্যবধান (সাদা স্থান) সামঞ্জস্যপূর্ণ থাকে তা নিশ্চিত করতে, আমরা bottom: 10% ব্যবহার করি। . যেহেতু কার্ডের উচ্চতা একটি নির্দিষ্ট 350 পিক্সেলে সেট করা হয়েছে, তাই কার্ডের নীচে থেকে পাঠ্য উপাদানগুলির দূরত্ব 100% সামঞ্জস্যপূর্ণ রাখা সহজ করে তোলে৷ z-index: 1; পাঠ্য উপাদানগুলিকে ওভারলের উপরে রাখে।
.card-text-wrapper :এই ক্লাস উভয় পাঠ্য উপাদানের সর্বোচ্চ-প্রস্থ নিয়ন্ত্রণ করে (শিরোনাম এবং বিবরণ)। যেহেতু আমরা কখনই এটি কার্ডের প্রস্থের বাইরে যেতে চাই না, তাই আমরা এটিকে 300px এর মান নির্ধারণ করি , যা কার্ডের সর্বোচ্চ-প্রস্থের থেকে 25% কম (400px ) আমরা এটিকে কিছুটা বাম এবং ডান প্যাডিংও দিই (1rem ), তাই পাঠ্য উপাদান এবং স্ক্রিনের সীমানার মধ্যে সর্বদা কিছুটা ব্যবধান থাকে (ছোট ডিভাইসগুলিতে গুরুত্বপূর্ণ)।
.card-overlay :যেহেতু হালকা ব্যাকগ্রাউন্ডে সাদা টেক্সট কাজ করে না, তাই আমাদের একটি গাঢ় বৈসাদৃশ্য প্রয়োজন। যাইহোক, আপনি সম্পূর্ণ চিত্রটিকে খুব অন্ধকার করতে চান না (তাহলে কী হবে?) অতএব, আমরা একটি linear-gradient ব্যবহার করি একটি আলো-থেকে-অন্ধকার ওভারলে তৈরি করার ফাংশন, ছবির উপরের অর্ধেকের সামান্য অন্ধকার (যেখানে কোনও টেক্সট নেই) কিন্তু টেক্সট পপ করার জন্য নীচের অর্ধেকের যথেষ্ট অন্ধকার।

টিপস ও ধারণা

এই ধরনের UI কার্ডগুলিতে, যেখানে ফটোগ্রাফি গল্পের একটি বড় অংশ, কার্ডটিকে অতিরিক্ত ভিড় না করা গুরুত্বপূর্ণ (উদাহরণস্বরূপ, আপনার পাঠ্যের আকার বিবেচনা করুন)। এটি আমার মনে ছিল কারণ আমি এটি সিএসএস দিয়ে স্টাইল করেছি। আপনি যে কার্ডটি ডিজাইন করছেন তার নির্দিষ্ট প্রেক্ষাপট সবসময় বিবেচনা করা উচিত।

এই টিউটোরিয়াল থেকে স্টাইলগুলি একটি নির্দেশিকা হিসাবে ব্যবহার করুন, তবে UI কার্ড ডিজাইনের কঠোর নিয়ম হিসাবে নয়। নীচে UI কার্ড ডিজাইনের কিছু সার্বজনীন/উদ্দেশ্য নির্দেশিকা রয়েছে:

স্পেসিং অত্যন্ত গুরুত্বপূর্ণ: সাদা স্থানের অভাব আপনার ডিজাইনকে ভিড় এবং ক্লাস্ট্রোফোবিক দেখায়। আপনার UI এর শ্বাস নিতে হবে, ঠিক আপনার মত যতটা ব্যবধান ব্যবহার করুন (প্যাডিং, মার্জিন, লাইনের উচ্চতা) আপনি যতটা দূর করতে পারেন (অবশ্যই প্রক্সিমিটির আইন ভঙ্গ না করে)।
টাইপোগ্রাফি: আপনি আপনার পাঠ্য উপাদানগুলি (ফন্ট নির্বাচন, ফন্টের আকার, লাইনের উচ্চতা, ইত্যাদি) যেভাবেই বিন্যাস করুন না কেন, নিশ্চিত করুন যে কোনও স্ক্রীনের আকারে পাঠ্যটি পড়া সহজ। ফন্টের আকার বাড়ানোর পরিবর্তে (এবং আরও জায়গা নেওয়া), আপনার পাঠ্য এবং পটভূমির মধ্যে রঙের বৈসাদৃশ্য বাড়ানোর চেষ্টা করুন, যেমনটি আমরা .card-overlay এর সাথে করেছি। ক্লাস।
সহজে ক্লিকযোগ্য ইন্টারফেস: যদি আপনার কার্ডের উপাদানগুলিকে ক্লিক করার কথা হয় তবে সেগুলিকে যথেষ্ট বড় করুন যাতে যে কেউ সহজেই তাদের মাউস বা থাম্ব দিয়ে ক্লিক করতে বা চাপতে পারে৷

তা ছাড়া, UI কার্ড ডিজাইনের কোনো নিয়ম নেই, আছে শুধু প্রসঙ্গ।

কিভাবে আপনার ওয়েবসাইটের জন্য একটি সহজ এবং সুন্দর UI কার্ড ডিজাইন করবেন

ধাপ 1:HTML

ধাপ 2:CSS

সিএসএস কীভাবে কাজ করে:

টিপস ও ধারণা