CSS filter

By /

CSS ফিল্টার:

CSS ফিল্টারগুলি একটি ওয়েবপৃষ্ঠার পাঠ্য, চিত্র এবং অন্যান্য দিকগুলিতে ভিজ্যুয়াল প্রভাব সেট করতে ব্যবহৃত হয়। CSS ফিল্টার প্রপার্টি আমাদেরকে এলিমেন্ট দেখানোর আগে কোনো এলিমেন্টের রেন্ডারিং পরিবর্তন করে রঙ বা ব্লারের মতো প্রভাবগুলি অ্যাক্সেস করতে দেয়।

CSS ফিল্টার প্রপার্টির সিনট্যাক্স নিচে দেওয়া হল।

বাক্য গঠন:

  1. filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();  

একটি উদাহরণ সহ সম্পত্তি মান আলোচনা করা যাক.

উজ্জ্বলতা()

এর নাম থেকে বোঝা যায়, এটি একটি উপাদানের উজ্জ্বলতা সেট করতে ব্যবহৃত হয়। যদি উজ্জ্বলতা 0% হয়, তাহলে এটি সম্পূর্ণ কালোকে প্রতিনিধিত্ব করে, যেখানে 100% উজ্জ্বলতা আসলটির প্রতিনিধিত্ব করে। এটি 100% এর উপরে মানও গ্রহণ করতে পারে যা উজ্জ্বল ফলাফল প্রদান করে।

আমরা নিম্নলিখিত চিত্রটি ব্যবহার করে এটি বুঝতে পারি।

উদাহরণ:

  1. <!DOCTYPE html>   
  2. </html>        
  3. <head>   
  4.     <title>CSS filter property</title>   
  5.     <style>   
  6.     body{  
  7.     text-align:center;  
  8.     }  
  9.         #img1 {   
  10.             filter: brightness(130%);   
  11.         }   
  12.     </style>   
  13. </head>   
  14. <body>   
  15.         <img src =  “tiger.png” > <h2>Original Image    </h2>  
  16.         <img src =  “tiger.png” id = “img1”> <h2>brightness(130%)</h2>      
  17. </body>   
  18. </html>  

ঝাপসা()

এটি উপাদানটিতে ব্লার প্রভাব প্রয়োগ করতে ব্যবহৃত হয়। যদি অস্পষ্ট মান নির্দিষ্ট করা না থাকে, তাহলে মান 0 একটি ডিফল্ট মান হিসাবে ব্যবহৃত হয়। blur() বৈশিষ্ট্যের প্যারামিটার শতাংশ মান গ্রহণ করে না। এটির একটি বড় মান আরও অস্পষ্টতা তৈরি করে।

উদাহরণ:

  1. <!DOCTYPE html>   
  2. </html>   
  3. <head>   
  4.     <title>CSS filter property</title>   
  5.     <style>   
  6.     body{  
  7.     text-align:center;  
  8.     }  
  9.         #img1 {   
  10.             filter: blur(2px);   
  11.         }   
  12.     </style>   
  13. </head>   
  14. <body>   
  15.         <img src =  “tiger.png” > <h2>Original Image    </h2>  
  16.         <img src =  “tiger.png” id = “img1”> <h2>blur(2px)</h2>     
  17. </body>   
  18.     
  19. </html>  

উল্টানো()

এটি ইনপুট চিত্রের নমুনাগুলিকে উল্টাতে ব্যবহৃত হয়। এর 100% মান সম্পূর্ণরূপে উল্টানো প্রতিনিধিত্ব করে, এবং 0% মান অপরিবর্তিত ইনপুট ছেড়ে যায়। এতে নেতিবাচক মান অনুমোদিত নয়।

উদাহরণ:

  1. <!DOCTYPE html>   
  2. <html>         
  3. <head>   
  4.     <title>CSS filter property</title>   
  5.     <style>   
  6.     body{  
  7.     text-align:center;  
  8.     }  
  9.         #img1 {   
  10.             filter: invert(60);   
  11.         }   
  12.     </style>   
  13. </head>   
  14. <body>   
  15.         <img src =  “tiger.png” > <h2>Original Image    </h2>  
  16.         <img src =  “tiger.png” id = “img1”> <h2>invert(60)</h2>    
  17. </body>   
  18. </html>  

পরিপূর্ণ()

এটি একটি উপাদানের স্যাচুরেশন সেট করে। 0% স্যাচুরেশন সম্পূর্ণ অসম্পৃক্ত উপাদানকে উপস্থাপন করে, যেখানে 100% স্যাচুরেশন আসলটি উপস্থাপন করে। 100%-এর বেশি মান অনুমোদিত যা সুপার-স্যাচুরেটেড ফলাফল প্রদান করে। আমরা এই সম্পত্তির সাথে নেতিবাচক মান ব্যবহার করতে পারি না।

উদাহরণ:

  1. <!DOCTYPE html>   
  2. </html>   
  3.         
  4. <head>   
  5.     <title>CSS filter property</title>   
  6.     <style>   
  7.     body{  
  8.     text-align:center;  
  9.     }  
  10.         #img1 {   
  11.             filter: saturate(40);   
  12.         }   
  13.     </style>   
  14. </head>   
  15. <body>   
  16.         <img src =  “tiger.png” > <h2>Original Image    </h2>  
  17.         <img src =  “tiger.png” id = “img1”> <h2>saturate(40)</h2>      
  18. </body>   
  19.     
  20. </html> 

ড্রপ-শ্যাডো()

এটি ইনপুট চিত্রে ড্রপ-শ্যাডো প্রভাব প্রয়োগ করে। এটি যে মানগুলি গ্রহণ করে তা হল এইচ-শ্যাডো, ভি-শ্যাডো, ব্লার, স্প্রেড এবং রঙ।

উদাহরণ:

  1. <!DOCTYPE html>   
  2. </html>   
  3.         
  4. <head>   
  5.     <title>CSS filter property</title>   
  6.     <style>   
  7.     body{  
  8.     text-align:center;  
  9.     }  
  10.         #img1 {   
  11.             filter:  drop-shadow(10px 20px 30px yellow);   
  12.         }   
  13.     </style>   
  14. </head>   
  15. <body>   
  16.         <img src =  “tiger.png” > <h2>Original Image    </h2>  
  17.         <img src =  “tiger.png” id = “img1”> <h2> drop-shadow(10px 20px 30px yellow);</h2>      
  18. </body>   
  19.     
  20. </html>  

বৈসাদৃশ্য()

এটি ইনপুটের বৈসাদৃশ্য সামঞ্জস্য করে। এর 0% মান একটি সম্পূর্ণ কালো চিত্র তৈরি করবে, যেখানে 100% মান অপরিবর্তিত ইনপুট ছেড়ে যায়, অর্থাৎ, আসলটিকে উপস্থাপন করে। 100% এর বেশি মান অনুমোদিত যা কম বৈসাদৃশ্য সহ ফলাফল প্রদান করে।

উদাহরণ:

  1. <!DOCTYPE html>   
  2. <html>   
  3.         
  4. <head>   
  5.     <title>CSS filter property</title>   
  6.     <style>   
  7.     body{  
  8.     text-align:center;  
  9.     }  
  10.         #img1 {   
  11.             filter:  contrast(50%);   
  12.         }   
  13.     </style>   
  14. </head>   
  15. <body>   
  16.         <img src =  “tiger.png” > <h2>Original Image    </h2>  
  17.         <img src =  “tiger.png” id = “img1”> <h2> contrast(50%)</h2>    
  18. </body>   
  19.     
  20. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top