खोज…
वाक्य - विन्यास
-
<calc()> = calc( <calc-sum> ) -
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* -
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* -
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
टिप्पणियों
calc() , " - " और " + " ऑपरेटरों के आसपास सफेद स्थान आवश्यक है, लेकिन " * " या " / " ऑपरेटर नहीं।
सभी इकाइयाँ एक ही प्रकार की होनी चाहिए; उदाहरण के लिए, समय अवधि के अनुसार ऊंचाई बढ़ाने की कोशिश करना अमान्य है।
कैल्क () फ़ंक्शन
गणितीय अभिव्यक्ति को स्वीकार करता है और एक संख्यात्मक मूल्य देता है।
एक विशेषता के मूल्य की गणना करने के लिए विभिन्न प्रकार की इकाइयों (जैसे एक प्रतिशत से px मूल्य घटाना) के साथ काम करते समय यह विशेष रूप से उपयोगी है।
+ , - , / , और * ऑपरेटर सभी का उपयोग किया जा सकता है, और यदि आवश्यक हो तो संचालन के क्रम को निर्दिष्ट करने के लिए कोष्ठक जोड़ा जा सकता है।
Div तत्व की चौड़ाई की गणना करने के लिए calc() का उपयोग करें:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
पृष्ठभूमि-छवि की स्थिति निर्धारित करने के लिए calc() का उपयोग करें:
background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;
एक तत्व की ऊंचाई निर्धारित करने के लिए calc() का उपयोग करें:
height: calc(100% - 20px);
attr () फ़ंक्शन
चयनित तत्व की विशेषता का मान लौटाता है।
नीचे एक अवरोधक तत्व है जिसमें एक data-* अंदर एक चरित्र होता data-* विशेषता जो सीएसएस का उपयोग कर सकती है (जैसे ::before छद्म तत्व के ::after ::before और ::after अंदर)।
<blockquote data-mark='"'></blockquote>
निम्नलिखित सीएसएस ब्लॉक में, तत्व के अंदर पाठ से पहले और बाद में चरित्र को जोड़ा जाता है:
blockquote[data-mark]::before,
blockquote[data-mark]::after {
content: attr(data-mark);
}
लीनियर-ग्रेडिएंट () फ़ंक्शन
रंगों के रैखिक ढाल का प्रतिनिधित्व करने वाली छवि बनाता है।
linear-gradient( 0deg, red, yellow 50%, blue);
यह नीचे से ऊपर तक जाने वाला एक ढाल बनाता है, जिसमें रंग लाल रंग से शुरू होते हैं, फिर 50% पर पीले, और नीले रंग में खत्म होते हैं।
रेडियल-ग्रेडिएंट () फ़ंक्शन
ढाल के केंद्र से निकलने वाले रंगों के एक ढाल का प्रतिनिधित्व करने वाली छवि बनाता है
radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/
var () फ़ंक्शन
Var () फ़ंक्शन सीएसएस चर को एक्सेस करने की अनुमति देता है।
/* set a variable */
:root {
--primary-color: blue;
}
/* access variable */
selector {
color: var(--primary-color);
}
यह सुविधा वर्तमान में चल रही है। नवीनतम ब्राउज़र समर्थन के लिए caniuse.com की जाँच करें।
