CSS3 का उपयोग करके इमेज पर सेपिया इफेक्ट लागू करना

फिल्टर सेपिया

CSS3 में इमेज पर सेपिया इफेक्ट लागू करने के लिए filter प्रॉपर्टी के लिए sepia() मान का उपयोग करें।

सिंटैक्स:

filter: sepia(percentage | number);

मान:

0% / 0: कोई इफेक्ट नहीं (मूल इमेज)
100% / 1: पूर्ण सेपिया (पुरानी फोटो लुक)
0-100% के बीच: आंशिक सेपिया इफेक्ट

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Spring Framework सीखें</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>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>

आउटपुट

दूसरी इमेज पूर्ण सेपिया टोन में - गर्म भूरे/पीले रंग की विंटेज फोटो जैसी।

सेपिया कैसे काम करता है:

सेपिया फिल्टर RGB चैनल्स को एक विशेष मैट्रिक्स द्वारा रूपांतरित करता है जो पुरानी सेपिया-टोन्ड फोटोग्राफ्स का अनुकरण करता है:

/* आंतरिक मैट्रिक्स (सरलीकृत) */
R' = 0.393R + 0.769G + 0.189B
G' = 0.349R + 0.686G + 0.168B
B' = 0.272R + 0.534G + 0.131B

अन्य फिल्टर्स के साथ संयोजन:

img.vintage {
  filter: sepia(80%) contrast(120%) brightness(110%);
}

img.old-photo {
  filter: sepia(100%) grayscale(20%) blur(1px) contrast(150%);
}

इंटरैक्टिव उदाहरण:

img {
  filter: sepia(0%);
  transition: filter 0.5s ease;
}
img:hover {
  filter: sepia(100%);
}

उपयोग के मामले:

विंटेज/रेट्रो फोटो इफेक्ट
ऐतिहासिक कंटेंट स्टाइलिंग
होवर स्टेट इंटरैक्शन
थीमिंग (सेपिया रीडिंग मोड)
स्टोरीटेलिंग वेबसाइट्स में दृश्य कथन