क्या क्रॉस-ब्राउजर बनाने के लिए CSS3 में कोई तरीका है (यानी मोज़िला, वेबकिट, और ओपेरा) इन्सेट बॉक्स छाया जो नीचे से सफेद तक काले रंग में परिवर्तित हो जाएगी? मुझे ऐसा करने का सबसे नज़दीकी तरीका केवल छाया के बाहर एक रंग होने की अनुमति देता है, फिर इस पृष्ठ पर अंदर के दूसरे रंग में संक्रमण: http://www.css3.info/preview/box-shadow/CSS3 बॉक्स-छाया रैखिक ग्रेडियेंट?
दुर्भाग्यवश, यह संभव नहीं है। मैं बस एक पृष्ठभूमि-छवि के साथ एक div का उपयोग करने का सुझाव देता हूं जिसे आप फ़ोटोशॉप या इसी तरह बनाते हैं।
ठीक है, एक बड़ा सौदा नहीं है। मैं केवल CSS3 का उपयोग करने की उम्मीद कर रहा था, लेकिन जब से मैं देखता हूं कि यह संभव नहीं है, मैं सिर्फ विचार छोड़ दूंगा। ;) –
मैं विचार को शूट करने के लिए इतना तेज़ नहीं होगा। यहां तक कि यदि आप एक div का उपयोग करते हैं तो पृष्ठभूमि-छवि एक ढाल हो सकती है, जो ब्राउज़र अपने मूल कोड में प्रस्तुत करता है और किसी भी संसाधन को डाउनलोड करने की आवश्यकता नहीं होती है। – redbmk
सच है - लेकिन यह सिर्फ एक इंसेट बॉक्स-छाया का भ्रम पैदा करेगा। सवाल विशेष रूप से पूछता है कि एक बॉक्स-छाया को ठोस रंग की बजाय ढाल दिया जा सकता है। – jacktheripper
this video by Lea Verou पर एक नज़र डालें। जिस अनुभाग से मैंने कुछ इसी तरह के बारे में वार्तालाप से जुड़ा हुआ है, जहां आप बॉक्स-छाया की तरह कुछ बनाने के लिए पृष्ठभूमि-छवि ग्रेडियेंट का उपयोग करते हैं। अगर मैं एक अच्छा काम करने वाला उदाहरण समझ सकता हूं तो मैं एक उत्तर पोस्ट करूंगा, लेकिन इससे आपको शुरू करने के लिए एक अच्छी जगह मिलनी चाहिए। छाया दिखाने के लिए :after छद्म-वर्ग के साथ box shadow curl जैसे कुछ वाकई अच्छी चीजें भी कर सकते हैं।
यहां बॉक्स के ऊपर और नीचे कुछ सरल उदाहरण हैं, और कुछ पाठ को रेखांकित करते हैं। आपको यह देखने के लिए कि आप क्या चाहते हैं, इसे देखने के लिए आपको इसके साथ खेलना होगा (बहुत, शायद), लेकिन सीएसएस में कुछ वाकई शानदार विशेषताएं हैं (और अधिक से अधिक होगी)।
body {
display: flex;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
.container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background:
radial-gradient(at 50% 0, black, transparent 70%),
linear-gradient(0deg, black, transparent 50%) bottom;
background-size: 100% 15px;
background-repeat: no-repeat;
}
.underline {
width: 6em;
text-align:center;
font-size:30px;
}
.underline:after {
content: '\00a0';
background-image:
radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
background-size: 100% 2px;
background-repeat: no-repeat;
float:left;
width:100%;
}<div class="container">
<div class="underline">Hello, world!</div>
</div>कोशिश एक का उपयोग कर: पहले तत्व एक 'छाया' सेट अप करने के लिए।
.classname {
&:before {
content: '';
position: absolute;
display: none;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
background: linear-gradient(to bottom, red, blue);
}
&:hover {
&:before {
display: inline-block;
}
}
}
यह उपरोक्त कोड इस तरह के एक होवर प्रभाव को स्थापित करने के तरीके पर एक उदाहरण है।
मुझे विश्वास नहीं है, – jacktheripper