ड्रॉप-शैडो फ़ंक्शन
drop-shadow फ़ंक्शन
बैकग्राउंड इमेज को शैडो
जोड़ने की अनुमति देता है।
सिंटैक्स
सिलेक्टर {
filter: drop-shadow(x-अक्ष पर शिफ्ट, y-अक्ष पर शिफ्ट, ब्लर रेडियस, रंग);
}
मान
| मान | विवरण |
|---|---|
| x-अक्ष पर शिफ्ट | बैकग्राउंड के सापेक्ष क्षैतिज रूप से शैडो का ऑफ़सेट। धनात्मक संख्या शैडो को दाईं ओर शिफ्ट करती है, ऋणात्मक - बाईं ओर। अनिवार्य पैरामीटर। |
| y-अक्ष पर शिफ्ट | बैकग्राउंड के सापेक्ष ऊर्ध्वाधर रूप से शैडो का ऑफ़सेट। धनात्मक संख्या शैडो को नीचे की ओर शिफ्ट करती है, ऋणात्मक - ऊपर की ओर। अनिवार्य पैरामीटर। |
| ब्लर रेडियस |
शैडो के ब्लर रेडियस को सेट करता है।
मान जितना अधिक होगा, शैडो उतनी ही अधिक ब्लर होगी।
वैकल्पिक पैरामीटर। डिफ़ॉल्ट रूप से
0 के बराबर।
|
| रंग | शैडो का रंग। वैकल्पिक पैरामीटर। डिफ़ॉल्ट रूप से शैडो का रंग काला सेट होता है। |
उदाहरण
आइए हम अपनी इमेज के लिए एक नीली शैडो सेट करें
जो अक्षों के साथ शिफ्ट न हो, 5px ब्लर रेडियस के साथ:
<div id="elem"></div>
#elem {
filter: drop-shadow(0 0 5px #035470);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
यह भी देखें
-
blurफ़ंक्शन,
जो बैकग्राउंड को ब्लर करता है -
brightnessफ़ंक्शन,
जो बैकग्राउंड की चमक सेट करता है -
contrastफ़ंक्शन,
जो बैकग्राउंड के कंट्रास्ट को सेट करता है -
hue-rotateफ़ंक्शन,
जो बैकग्राउंड के ह्यू को सेट करता है -
invertफ़ंक्शन,
जो बैकग्राउंड के रंगों को इनवर्ट करता है -
opacityफ़ंक्शन,
जो बैकग्राउंड की पारदर्शिता सेट करता है -
sepiaफ़ंक्शन,
जो बैकग्राउंड को सेपिया में बदलता है -
backgroundप्रॉपर्टी,
जो बैकग्राउंड के लिए एक शॉर्टहैंड प्रॉपर्टी है -
background-imageप्रॉपर्टी,
जिसका उपयोग करके किसी ब्लॉक को बैकग्राउंड इमेज दी जा सकती है