Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS3 का उपयोग करके छवियों पर सेपिया प्रभाव लागू करना

<घंटा/>

CSS3 का उपयोग करके छवियों पर सेपिया प्रभाव लागू करने के लिए, फ़िल्टर गुण के लिए सेपिया मान का उपयोग करें।

उदाहरण

कोड इस प्रकार है -

<!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>

आउटपुट

CSS3 का उपयोग करके छवियों पर सेपिया प्रभाव लागू करना


  1. CSS3 का उपयोग करके कई बदलाव करना

    एकाधिक ट्रांज़िशन के लिए, CSS3 ट्रांज़िशन प्रॉपर्टी का उपयोग करें, जो एक शॉर्टहैंड प्रॉपर्टी है। यह संपत्ति, अवधि, समय और संक्रमण की देरी को एक पंक्ति में सेट करता है। CSS3 का उपयोग करके कई ट्रांज़िशन करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style&g

  1. CSS3 का उपयोग करके तत्वों का 2D परिवर्तन

    2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक

  1. CSS3 का उपयोग करके वर्ड ब्रेकिंग नियम निर्दिष्ट करें

    CSS3 में वर्ड ब्रेकिंग नियम निर्दिष्ट करने के लिए, वर्ड-ब्रेक प्रॉपर्टी का उपयोग करें। इस गुण का उपयोग रेखा को तोड़ने के लिए किया जाता है। संभावित मूल्यों में सामान्य, ब्रेक-ऑल, कीप-ऑल, ब्रेक-वर्ड, आदि शामिल हैं। CSS3 का उपयोग करते हुए वर्ड ब्रेकिंग नियमों को निर्दिष्ट करने के लिए कोड निम्नलिखित है