কম্পিউটার

CSS3 ব্যবহার করে ছবিতে ড্রপ শ্যাডো যোগ করা


CSS3-এ ছবিতে ড্রপ শ্যাডো যোগ করতে, ফিল্টার প্রপার্টির জন্য ড্রপ-শ্যাডো মান ব্যবহার করুন। এটির নিম্নলিখিত মান রয়েছে −

h-ছায়া - অনুভূমিক ছায়ার জন্য একটি পিক্সেল মান নির্দিষ্ট করতে।

v-ছায়া - উল্লম্ব ছায়ার জন্য একটি পিক্সেল মান নির্দিষ্ট করতে। নেতিবাচক মান চিত্রের উপরে ছায়া রাখে।

ব্লার - ছায়ায় একটি অস্পষ্ট প্রভাব যোগ করতে।

প্রসারণ - ইতিবাচক মান ছায়াকে প্রসারিত করে এবং নেতিবাচককে সঙ্কুচিত করে।

রঙ - ছায়ায় রঙ যোগ করতে

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
   filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

আউটপুট

CSS3 ব্যবহার করে ছবিতে ড্রপ শ্যাডো যোগ করা


  1. CSS3 ফিল্টার ইফেক্ট নিয়ে কাজ করা

  2. CSS3 এর সাথে একাধিক ব্যাকগ্রাউন্ড যোগ করা

  3. CSS3 ব্যবহার করে উপাদানের 2D রূপান্তর

  4. CSS3 ব্যবহার করে ওয়ার্ড ব্রেকিং নিয়ম উল্লেখ করুন