मैं रेडियल सीएसएस 3 सीमा ढाल छाया कैसे बना सकता हूं

Question

मेरे पास दो कॉलम हैं जो परिवर्तनीय ऊंचाइयों तक फैल सकते हैं, डिजाइनर दो स्तंभों के बीच छाया रखना चाहता है, लेकिन जैसा कि आप छवि को शीर्ष पर बाहर निकाल सकते हैं और तल। इसका मतलब है कि मैं सिर्फ सीएसएस का उपयोग करके पृष्ठभूमि छवि का उपयोग नहीं कर सकता जो दाईं ओर कॉलम में गठबंधन है।

तो फिर मैं हालांकि शायद मैं एक सीएसएस 3 सीमा छाया रेडियल ग्रेडिएंट है कि उपयोग कर सकते हैं। मैं शायद ऐसा करने के लिए टेबल कोशिकाओं का उपयोग करने जा रहा हूं क्योंकि मुझे सबसे ऊंचे स्तंभ की ऊंचाई तक फैलाने के लिए छाया की आवश्यकता है। मैं यह कैसे करु?

Answer 1

पिछला जवाब वास्तव में अपने प्रश्न का उत्तर नहीं देता:

"मैं कैसे एक रेडियल css3 सीमा ढाल छाया बना सकता हूँ" आप छवियों के बिना एक सीमा छाया अनुकरण करने के लिए रेडियल ग्रेडिएंट उपयोग कर सकते हैं।

डेमो: http://jsfiddle.net/sonic1980/wRuaZ/

background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%); 
            |  |  |  | 
            |  |  |  +--> color end  
            |  |  +--> color start 
            |  +--> size of gradient ellipse (x-axis, y-axis) 
            +---> position of ellipse center 

यह खड़ी कर सकते हैं या का उपयोग कर लागू करने के लिए संशोधित करने के लिए आसान है: पहले या: छद्म वर्गों के बाद।

एक अन्य उदाहरण है, छाया के साथ एक <hr> टैग: http://jsfiddle.net/sonic1980/65Hfc/

Answer 2

मेरे पास एक सुझाव है कि आपको सीएसएस 3 का उपयोग करने की आवश्यकता नहीं है, आप दो अलग-अलग वर्गों का उपयोग कर सकते हैं, एक सामान्य है, और अन्य की पृष्ठभूमि है। और पेज खत्म होने पर, और जेएस विधि को कॉल करें, सेटटाइमआउट कुछ सेकेंड डील करने के लिए, टॉगल क्लास।

Answer 3

मुझे लगता है कि मैं सिर्फ एक अन्य समाधान div पर छवि का उपयोग करने, और सेट एक मिनट ऊंचाई :-)

.column.right { 
    padding-left: 30px; 
    background: url(/img/shadow.png) no-repeat left top; 
    min-height: 265px; 
} 

Answer 4

वास्तव में एक गतिशील ऊंचाई स्तंभ के लिए अनुमति होगी जा रहा हूँ, लेकिन यह केवल IE8 है + समर्थन।

आप जो करना चाहते हैं वह background-image सबसे लंबा स्तंभ के किनारे पर स्थित है। फिर आप :before और :after स्यूडोलेमेंट्स का उपयोग कर सकते हैं, absolutetop:0; और bottom:0 की स्थिति क्रमशः छाया पर 'टोपी' सेट करने के लिए सेट कर सकते हैं।

क्या यह समझ में आता है? यहां एक JSFiddle है जो छवियों के बजाय, सीमा और टेक्स्ट का उपयोग करके दिखाता है।

बेशक, JS12iddle में div के height पैरामीटर का कोई परिणाम नहीं है; यह min-height या nonexistent हो सकता है। मैंने इसे div कुछ आकार देने के लिए बस सेट किया है।