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

CSS3 का उपयोग करके छवियों में ड्रॉप शैडो जोड़ना

<घंटा/>

CSS3 में छवि में ड्रॉप शैडो जोड़ने के लिए, फ़िल्टर गुण के लिए ड्रॉप-शैडो मान का उपयोग करें। इसके निम्नलिखित मान हैं -

एच-छाया - क्षैतिज छाया के लिए पिक्सेल मान निर्दिष्ट करने के लिए।

वी-छाया - लंबवत छाया के लिए पिक्सेल मान निर्दिष्ट करने के लिए। नकारात्मक मान छाया को छवि के ऊपर रखते हैं।

धुंधला - छाया में धुंधला प्रभाव जोड़ने के लिए।

फैलें - सकारात्मक मूल्यों के कारण छाया फैलती है और नकारात्मक सिकुड़ती है।

रंग - छाया में रंग जोड़ने के लिए

उदाहरण

<!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 के साथ एकाधिक पृष्ठभूमि जोड़ना

    कई बैकग्राउंड जोड़ने के लिए, CSS में बैकग्राउंड-इमेज प्रॉपर्टी का इस्तेमाल करें। एकाधिक पृष्ठभूमि जोड़ने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {

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

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

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

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