TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে CSS ইমেজ ক্যাপশন এফেক্ট তৈরি করবেন?

0

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

ওয়ার্ডপ্রেস শিখুন: 400+ বিনামূল্যে ওয়ার্ডপ্রেস টিউটোরিয়াল দেখুন

সিএসএস ইমেজ ক্যাপশন প্রভাব

উইজেট নিচের মত দেখাবে।

ছবির ক্যাপশন – স্লাইড ডাউন স্টাইল

স্লাইড ডাউন ক্যাপশন। লিঙ্ক সম্ভব।

চিত্র ক্যাপশন – অনুভূমিক বিভক্ত শৈলী

হরিজন্টল স্প্লিট স্টাইল ক্যাপশন।

চিত্র ক্যাপশন – উল্লম্ব বিভক্ত শৈলী

উল্লম্ব বিভক্ত শৈলী ক্যাপশন

ছবির ক্যাপশন – স্লাইড আপ স্টাইল

ছবি স্লাইড আপ ক্যাপশন

4 বিভিন্ন শৈলী

আপনি ডেমোতে দেখতে পারেন, চারটি ভিন্ন প্রভাব রয়েছে যা আপনি ছবির ক্যাপশন তৈরি করতে পারেন।

  • নিচে স্লাইড
  • অনুভূমিক বিভাজন
  • উল্লম্ব বিভাজন
  • শেষ ঘন্টা

ইমেজ ক্যাপশন প্রভাবের জন্য এইচটিএমএল

আসুন প্রথমে স্লাইড ডাউন এফেক্ট দিয়ে এইচটিএমএল অংশ ব্যাখ্যা করি, যাতে সিএসএস অংশটি বুঝতে সহজ হয়। নিচে স্লাইড ডাউন ইফেক্টের জন্য HTML দেওয়া হল।

<div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>

এটিতে নিম্নলিখিত CSS ক্লাস রয়েছে:

  • সাধারণ – এই চারটি প্রভাবের জন্য প্রযোজ্য সাধারণ স্টাইল সেট।
  • স্লাইডডাউন – এটি স্লাইড ডাউন ইফেক্ট তৈরির জন্য স্টাইল সেট। অন্যান্য তিনটি প্রভাবের জন্য আমরা স্প্লিট-হরিজ, স্প্লিট-ভার্ট এবং স্লাইডআপ সিএসএস ক্লাস ব্যবহার করেছি। আপনি ভিন্ন প্রভাব পেতে শুধু এই শ্রেণী প্রতিস্থাপন করতে পারেন।
  • পিক-ক্যাপশন -এই ক্লাসটি ইমেজ ক্যাপশন সম্পর্কিত প্রভাবকে সংজ্ঞায়িত করে।

দ্রষ্টব্য: ছবির আকার 300 × 300 পিক্সেল ব্যবহার করা হয় যাতে মোবাইল ডিভাইসে কোন অতিরিক্ত সমন্বয় প্রয়োজন হয় না।

ইমেজ ক্যাপশন প্রভাবের জন্য CSS

উপরের HTML কোডে আমরা একটি বহিরাগত ফাইল থেকে সমস্ত প্রয়োজনীয় CSS আমদানি করার জন্য "imagecaption.css" ফাইলটি ব্যবহার করেছি। নিচে স্লাইড ডাউন ইফেক্টের জন্য CSS দেওয়া আছে এবং নিচের বাটনে ক্লিক করে আপনি সম্পূর্ণ CSS এবং HTML ফাইল ডাউনলোড করতে পারেন।

/* General Style */ .common{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; } .common::before, .common::after{ content: ''; width: 100%; height: 100%; background: black; position: absolute; opacity: 0.3; top: 0; left 0; -moz-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .pic-caption { position: absolute; text-align: center; background: lightyellow; z-index: 999; width: 100%; max-height: 100%; overflow: hidden; top: 50%; -webkit-transform: translate3d(-100%, -50%, 0); transform: translate3d(-100%, -50%, 0); -webkit-transition: all 0.5s; transition: all 0.5s; line-height: 30px; font-size: 16px; } .pic-caption a{ text-decoration: none; } img { display: block; } /* Slidedown Caption */ .slidedown:hover::before{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slidedown:hover .pic-caption{ opacity: 1; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  • সাধারণ স্টাইল বিভাগের অধীনে, আমরা ছবির প্রতিটি ব্লক দেখানোর জন্য ইনলাইন ব্লক তৈরি করেছি।
  • ছদ্ম উপাদান (:: আগে এবং :: পরে) ছবিতে স্লাইডার প্রভাব তৈরি করতে ব্যবহৃত হয়।
  • আপনি কেবল হোভারে ক্যাপশন দেখতে পারেন এবং পৃষ্ঠাটি লোড হলে অদৃশ্য হয়ে যায়।
  • "পিক-ক্যাপশন" শ্রেণী ক্যাপশনের জন্য হালকা হলুদ রঙ নির্ধারণ করে এবং ছবির অবস্থানের উপর থেকে ক্যাপশনটি 50% লোড করে।
  • CSS ট্রানজিশন এবং ট্রান্সফর্ম ক্যাপশনটিকে বাম থেকে ডানে স্লাইড করতে সাহায্য করে।
  • "স্লাইড ডাউন ক্যাপশন" এর অধীনে বিভাগটি স্লাইডার এবং তারপর CSS ট্রান্সফর্ম এবং ট্রানজিশন প্রপার্টি ব্যবহার করে ক্যাপশন দেখাতে সাহায্য করে।

আপনার ওয়েবপেজে ব্যবহার

ইমেজ ক্যাপশন ইফেক্টের চারটি স্টাইলের জন্য সম্পূর্ণ এইচটিএমএল এবং সিএসএস কোড সম্বলিত জিপ ফাইল “ইমেজ ক্যাপশন এফেক্টস.জিপ" ডাউনলোড করুন।

জিপ আর্কাইভে দুটি ফাইল রয়েছে “imagecaption.css” এবং “Imagecaption.html”।

  • আপনার HTML এর একই ফোল্ডারে CSS ফাইল আপলোড করুন অথবা HTML কোডে CSS ফাইলের সম্পূর্ণ লিঙ্ক দিন।
  • আপনি… ট্যাগ ব্যবহার করে HTML এর প্রধান অংশে CSS সন্নিবেশ করতে পারেন।
  • আপনার ওয়েবপেজের বডি ট্যাগের মধ্যে HTML কোড এম্বেড করুন।
  • আপনি শুধুমাত্র বিশেষ প্রভাবের জন্য প্রাসঙ্গিক HTML div বিভাগ ব্যবহার করতে পারেন।

চারটি স্টাইলের জন্য সম্পূর্ণ HTML নীচের মত হওয়া উচিত:

<!DOCTYPE html> <html> <head> <title>CSS Image Caption Effects</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Horizontal"> <div class="pic-caption">Horizontl Split Style Caption.</div> </div> <div class="common split-vert"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Vertical"> <div class="pic-caption">Vertical Split Style Caption</div> </div> <div class="common slideup"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত