কম্পিউটার টিউটোরিয়াল

CSS3 filter: sepia() দিয়ে ছবিতে সেপিয়া ইফেক্ট যোগ করা

filter: sepia(<percentage>) ফাংশন দিয়ে ছবিতে সেপিয়া (পুরানো ছবির মতো নাড়াচাড়া भूশ্বেত রঙ) ইফেক্ট প্রয়োগ করা যায়। 0% = মূল ছবি, 100% = পুরোপুরি সেপিয়া।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo { filter: sepia(100%); }
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

টিপ: হোভারে সেপিয়া হটাতে img:hover { filter: sepia(100%); transition: filter 0.3s; } ব্যবহার করুন।

  1. CSS3 লিনিয়ার এবং রেডিয়াল গ্রেডিয়েন্ট ব্যবহার

  2. CSS3 Multiple Transitions (একাধিক ট্রানজিশন) ব্যবহার

  3. CSS3 ২D ট্রান্সফর্মেশন (2D Transformation) অফ এলিমেন্টস

  4. CSS3 Word Break (Word Breaking Rules) নির্দিষ্ট করা