HTML এবং CSS দিয়ে একটি সিম্পল, সুন্দর UI কার্ড কম্পোনেন্ট ডিজাইন করা শিখুন। লিনিয়ার-গ্রেডিয়েন্ট "ট্রিক" দিয়ে টেক্সটকে পপ আউট করানো শিখবেন।
UI কার্ড হলো একটি UI কম্পোনেন্ট যা ওয়েবসাইটে "অ্যাপেটাইজার"র মতো কাজ করে। সাধারণত এতে টেক্সট, ফটোগ্রাফি, আইকন এবং ইন্টারঅ্যাক্টিভ এলিমেন্ট (বাটন/লিংক) থাকে।
স্টেপ ১: HTML
<body> এলিমেন্টের ভিতরে নিচের HTML যোগ করুন:
<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="ডেনমার্কের নর্থ সागर দৃশ্য" />
<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>মূল পয়েন্ট: পুরো কার্ডকে একটি অ্যানকর (<a>) এলিমেন্টে র্যাপ করা হয়েছে যাতে পুরো কার্ড ক্লিকযোগ্য হয়। href="#" को реаль URL (যেমন href="/northern-sea-of-denmark") দিয়ে রিপ্লেস করুন।
স্টেপ ২: 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; }CSS কীভাবে কাজ করে
.card:max-width: 400pxদিয়ে রেসপন্সিভ করা হয়েছে। হাইট ফিক্সড (৩৫০পিক্সেল)।.card-thumbnail:object-fit: coverদিয়ে ইমেজের এসপেক্ট রেশিও বজায় রাখা হয়েছে।.card-text-container:bottom: 10%দিয়ে টেক্সট পজিশন কনসিস্টেন্ট রাখা হয়েছে।z-index: 2দিয়ে টেক্সট ওভারলে-এর উপরে রাখা হয়েছে।.card-text-wrapper: টেক্সটের ম্যাক্স-উইডথ ৩০০পিক্সেল (কার্ডের ২৫% কম) এবং সাইড প্যাডিং ১rem—স্মল ডিভাইসে টেক্সট স্ক্রিনের কিনারা থেকে দূরে থাকবে।.card-overlay:linear-gradientদিয়ে লাইট-টু-ডার্ক ওভারলে তৈরি করা হয়েছে—উপরের অংশে কম অন্ধকার (টেক্সট নেই), নিচের অংশে বেশি অন্ধকার যাতে সাদা টেক্সট পপ করে।
টিপস ও আইডিয়া
- স্পেসিং অত্যন্ত গুরুত্বপূর্ণ: হোয়াইটস্পেস ছাড়া ডিজাইন claustrophobic লাগে। যতটা সম্ভব স্পেসিং (প্যাডিং, মার্জিন, লাইন-হাইট) ব্যবহার করুন।
- টাইপোগ্রাফি: যেকোনো স্ক্রিন সাইজে টেক্সট পড়া সহজ হয় সেটা নিশ্চিত করুন। ফন্ট সাইজ বড় করার বদলে কালার কনট্রাস্ট বড় করুন (যেমন
.card-overlayক্লাসে করা হয়েছে)। - সহজে ক্লিকযোগ্য ইন্টারফেস: ক্লিকযোগ্য এলিমেন্টগুলো যথেষ্ট বড় রাখুন যাতে মাউস বা থাম্ব সহজে ক্লিক করা যায়।
UI কার্ড ডিজাইনের কোনো কঠোর নিয়ম নেই—শুধু কনটেক্সট মэтার করে।
