একটি ওভারলে হল এমন একটি প্রভাব যা ব্যবহারকারীদের পরবর্তী পদক্ষেপের সঠিক দিকে নিয়ে যেতে একটি ওয়েবসাইটে ব্যবহৃত হয়। সঠিক ব্যবহারে একটি ইতিবাচক ব্যবহারকারীর অভিজ্ঞতা তৈরি করার ক্ষমতা রয়েছে, যা ব্যবহারকারীদের আপনার ওয়েবসাইটে রাখবে।
একটি ওভারলে তৈরি করার বিভিন্ন উপায় রয়েছে। কোন একটি সঠিক উপায় নেই - এটি আপনার সাইটের জন্য সর্বোত্তম কাজ করে এবং আপনার যা প্রয়োজন তা বেছে নেওয়ার বিষয়ে।
এই নির্দেশিকাটিতে, আমরা একটি চিত্রের উপর ঘোরাঘুরি করার সময় আপনি যে ওভারলে প্রভাবটি খুঁজছেন তা পেতে আমরা মৌলিক HTML এবং CSS (কোনও জাভাস্ক্রিপ্ট নেই) ব্যবহার করার উপর ফোকাস করব।
আপনার HTML ব্লক করুন
আসুন আপনার HTML বয়লারপ্লেট তৈরি করি যা আমাদের ইমেজ ওভারলে তৈরি করতে ব্যবহার করা হবে:
<html> <head> <style> /*No CSS to display yet*/ </style> </head> <body> <div class="container" ></div> </body> </html>
সমস্যা বুঝুন
প্রথমবার নতুন কিছু করার চেষ্টা করার সময়, সার্চ ইঞ্জিনের সাথে পরামর্শ করার আগে আপনার বসে থাকা উচিত এবং কীভাবে সমস্যাটি সমাধান করা উচিত তা নিয়ে চিন্তা করা উচিত। ওভারলে কীভাবে কাজ করে এবং আমাদের কী করতে হবে সে সম্পর্কে আপনার যখন দৃঢ় ধারণা থাকবে, প্রয়োজন হলে ইঙ্গিত এবং টিপস খোঁজার ক্ষেত্রে আপনার ভাগ্য ভালো থাকবে।
রিক্যাপ হিসাবে, একটি ওভারলে একটি পাত্রের উপর দিয়ে যায় (আমাদের উদাহরণে, একটি চিত্র) এবং যখন আমরা এটির উপর হভার করি তখন ছবিটিতে কিছু করে। এটি ব্যবহারকারীকে সাইটের সাথে ইন্টারঅ্যাক্ট করার নির্দেশ দেয়।
এগিয়ে চলুন, বড় ছবি ভাবুন - কীভাবে এটি করবেন তার সমস্ত মিনিটের বিশদ বিবরণ দেওয়ার চেষ্টা করবেন না। আমাদের একটি চিত্র রয়েছে এবং আমাদের একটি ওভারলে রয়েছে - এটি কমপক্ষে দুটি পাত্রে। এবং সেই দুটি পাত্রে একটি বড় পাত্রে থাকা দরকার।
এখনও কিছু স্টাইল করার চেষ্টা করবেন না - HTML এ বিশুদ্ধভাবে কাজ করুন এবং এটি কোড করুন। নীচের মার্কআপটি একবার দেখার আগে আপনি নিজে থেকে এটিকে ব্লক করতে পারেন কিনা দেখুন:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
<html> <head> <style> /*No CSS to display yet*/ </style> </head> <body> <div class="container" > <div class="overlay-outer> <img class="item-to-overlay" src="file-here" alt="this-is-our-image" /> <div class="overlay-inner"> This is our overlay div. </div> </div> </div> </body> </html>
একবার আমরা মূল ব্লকগুলি বের করে ফেললে, আমরা স্টাইলিংয়ে কাজ করতে পারি। আমি বাইরের/বড় পাত্র থেকে শুরু করতে এবং ছোট পাত্রে আমার পথ কাজ করতে চাই। এটি ধারকটির প্রকৃত প্রস্থের ট্র্যাক রাখতে সহায়তা করে। আপনি দেখতে পেতে পারেন যে আপনি ভিতর থেকে শুরু করতে এবং আপনার উপায় বের করতে পছন্দ করেন - এটিও সম্পূর্ণভাবে ঠিক আছে। নীচে আমার সাথে অনুসরণ করুন৷
শরীর
বাইরে থেকে শুরু করে এবং আমাদের পথে কাজ করে, আমরা প্রথমে বডি ট্যাগে আসি - এটি পৃষ্ঠার সবচেয়ে বড় ধারক এবং আমাদের পৃষ্ঠাটি ধরে রাখে। এখানে আপনি একটি পটভূমির রঙ, মার্জিন এবং অ্যাপ্লিকেশনটির প্রস্থ এবং সর্বোচ্চ-প্রস্থ সেট করতে পারেন:
<style>
body {
background-color: gray;
max-width: 800px;
width: 100%;
}
</style>
Div.container
পরবর্তী ধারক আমরা আমাদের প্রথম div আসা. এই এক মোটামুটি সোজা. আমরা শুধু চাই এর প্রস্থ 100% হোক।
<style>
body {
background-color: gray;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
div.container {
width: 100%;
}
</style>
Div.overlay-outer
আমরা মার্কআপে ডুব দেওয়ার সাথে সাথে পরবর্তী <div> আমরা class=”overlay-outer” নিয়ে এসেছি . এখানে আমাদের ওভারলে এর স্টাইলিং সম্পর্কে চিন্তা করা শুরু করতে হবে।
আমাদের প্রথমে যে ধারকটির জন্য চিত্র এবং ওভারলে থাকবে তার সংজ্ঞা তৈরি করতে হবে। ওয়েবপৃষ্ঠার প্রস্থের কতটুকু আমরা আমাদের ওভারলে কন্টেনারটি নিতে চাই? উচ্চতা সম্পর্কে কি? এটিও <div> যেখানে আমাদের ইমেজের জন্য আমাদের "বেড়া" স্থাপন করতে হবে। তাই আমাদের উপাদানটিতে একটি অবস্থান সম্পত্তি যোগ করতে হবে:
<style>
body {
background-color: gray;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
div.container {
width: 100%;
}
div.overlay-outer {
width: 50%;
height: 400px;
position: relative;
}
div.
</style>
সিএসএস ওভারলে আমরা এখন পর্যন্ত সিএসএস-এ যা শিখেছি তার অনেক কিছুকে একত্রিত করে:পজিশনিং, ব্যাকগ্রাউন্ড-কালার, অপাসিটি, অবজেক্ট-ফিট এবং ডিভস। বাইরের ওভারলে ধারকটি স্টাইল করার পরে, আমাদের চিত্র এবং ভিতরের ওভারলে পাত্রে একবার নজর দিতে হবে।
Img
ছবিটির উপাদানটি যে কন্টেইনারে বসে আছে তার প্রস্থ এবং উচ্চতার সাথে মেলে। আপনি চাইলে একটি বর্ডার লাগানোর এবং আপনার ছবি কাটানোর জায়গাও এটি।
Div.overlay-inner
অভ্যন্তরীণ ওভারলে <div> এবং এর শৈলী ওভারলে এর প্রকৃত চেহারা উদ্বেগ. এখানেই আপনি আপনার ওভারলের জন্য আপনার পটভূমির রঙ বেছে নেবেন, অপাসিটি 0 এ সেট করুন। সবচেয়ে গুরুত্বপূর্ণ, আমাদের একটি position: absolute, top: 0 and left: 0 যোগ করতে হবে যাতে ওভারলে-ইনার ডিভটি <div> -এ অবস্থান করে যে অবস্থানে সেট করা হয়:আপেক্ষিক।
Div.overlay-inner p
এখানে আমরা ওভারলে কন্টেইনারের প্রকৃত বিষয়বস্তু স্টাইল করি।
Div.overlay-outer:hover .overlay-inner
অবশেষে, আমরা আমাদের বাইরের ওভারলে কন্টেইনারে একটি :hover pseudo-class লাগাতে যাচ্ছি যাতে ওভারলেটি দেখাবে যখন আমরা এটির উপর মাউস করি:
.outside:hover .inside {
opacity: .8;
transition: opacity .5s;
}
0 এবং 1-এর মধ্যে অস্বচ্ছতা সেট করা অভ্যন্তরীণ ওভারলে ডিভ-এ বরাদ্দ করা পটভূমি-রঙকে স্বচ্ছ হতে দেয়। ট্রানজিশন প্রপার্টি এটিকে অপাসিটি 0 থেকে অপাসিটি 8 এ একটি মসৃণ পরিবর্তন করে।
আপনি এখন সফলভাবে একটি CSS ওভারলে তৈরি করেছেন। অভিনন্দন!
CSS এবং HTML ব্যবহার করে আপনি একটি উপাদানের জন্য একটি ওভারলে তৈরি করতে পারেন এমন কয়েকটি উপায়ের মধ্যে একটি। এই সমাধানের জন্য, আমরা সাহায্য করার জন্য CSS থেকে বেশ কিছু বৈশিষ্ট্য ব্যবহার করেছি:রূপান্তর, অবস্থান, বস্তু-ফিট, প্রস্থ, উচ্চতা এবং আরও অনেক কিছু।
এই প্রবন্ধে, আমরা আরও শিখেছি কীভাবে আমাদের সমস্যার কাছে যেতে হয়, কীভাবে আমাদের HTML ব্লক করতে হয় এবং তারপর কীভাবে আমাদের ওভারলে প্রভাবের জন্য CSS স্টাইল করতে হয়। নীচের কোড এডিটরে এখানে কভার করা পয়েন্টগুলির একটি কার্যকর উদাহরণ রয়েছে:
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: grey;
max-width: 800px;
height: 1000px;
}
.outside {
width: 75%;
height: 400px;
display: inline-block;
position: relative;
cursor: pointer;
}
.images {
width: 100%;
height: 400px;
object-fit: cover;
border: 5px double black;
}
.inside {
background-color: #9c1203;
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
}
.inside p {
color: #fff;
line-height: 150px;
font-family: 'arial';
padding: 20px;
text-align: left;
}
.outside:hover .inside {
opacity: .8;
transition: opacity .5s;
}
</style>
</head>
<body>
<div class="container" >
<h1>CSS Overlay</h1>
<div class="overlay-outer>
<img class="images" src="https://images.unsplash.com/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80" /> alt="this-is-our-image" />
<div class="overlay-inner">
<p>This is an overlay!</p>
</div>
</div>
</div>
</body>
</html>
আপনি এই ওভারলেটির নিজস্ব সংস্করণ তৈরি করতে পারেন কিনা তা দেখতে মার্কআপের সাথে খেলার জন্য সময় নিন।
