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

CSS प्रॉपर्टी मान निर्धारित करने के लिए गणना करें

CSS calc() फ़ंक्शन का उपयोग करके प्रॉपर्टी मानों की गणना करें, जैसे चौड़ाई, ऊंचाई, मार्जिन आदि। यह विभिन्न इकाइयों (px, %, em, आदि) को मिलाने की अनुमति देता है।

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          #demo {             position: absolute;             width: calc(100% - 100px);             background-color: blue;             text-align: center;          }       </style>    </head>    <body>       <h1>Heading One</h1>       <div id = "demo">This is it!</div>    </body> </html>

व्याख्या: width: calc(100% - 100px) एलिमेंट की चौड़ाई को पैरेंट की पूरी चौड़ाई से 100px कम सेट करता है, जिससे रिस्पॉन्सिव डिज़ाइन में उपयोगी होता है।

  1. - CSS perspective-origin प्रॉपर्टी पर एनिमेशन करें

    CSS में perspective-origin प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह 3D-ट्रांसफॉर्म किए गए तत्वों के लिए वैनिशिंग पॉइंट (दृष्टिकोण मूल) की स्थिति को बदलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> #demo1 { position: relative

  1. - CSS perspective प्रॉपर्टी पर एनिमेशन करें

    CSS में perspective प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह 3D-ट्रांसफॉर्म किए गए बच्चे तत्वों के लिए दृष्टिकोण दूरी को बदलता है, जिससे गहराई प्रभाव बदलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> #demo1 { position: relati

  1. - CSS padding-top प्रॉपर्टी पर एनिमेशन करें

    CSS में padding-top प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। उदाहरण <!DOCTYPE html> <html> <head> <style> div { width: 350px; height: 150px; outline: 3px solid maroon; animation: myanim 3s infinite;