यही है, तत्व की बाएं और निचली सीमाओं को इसके 3 डी प्रभाव को पॉप आउट करने की आवश्यकता है। क्या इस प्रभाव को पूरा करने के लिए कोई अच्छा, पूरी तरह से सीएसएस तरीका है?सीएसएस: उठाए गए बॉक्स प्रभाव को बनाने का एक अच्छा तरीका क्या है?
मुझे यह पता लगाने की कोशिश करते हुए यह प्रश्न मिला, और मुझे लगता है कि आप जो खोज रहे हैं वह इस http://jsfiddle.net/9Lt2477w/ जैसा कुछ है।
.raisedbox {
padding: 10px;
border: 1px solid #77aaff;
box-shadow: -1px 1px #77aaff,
-2px 2px #77aaff,
-3px 3px #77aaff,
-4px 4px #77aaff,
-5px 5px #77aaff;
}
यहां सहायता के लिए http://sam-morrow.com/playground/css-cubes.py पर धन्यवाद। मुझे एहसास नहीं हुआ कि आप बॉक्स-छाया संपत्ति में अतिरिक्त लाइनें जोड़ सकते हैं।
आप इस पर अपने समाधान का आधार कर सकते हैं:
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
आप border-bottom-style और border-right-style इस्तेमाल कर सकते हैं, Stackoverflow टैग के साथ करता है बस के रूप में।
शैलियों inset और outset का उपयोग करें।
#foo {
/* ... */
border:8px outset #999;
-webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}
यहाँ उदाहरण लाइव है: http://jsfiddle.net/sjkXS/1/
हाँ, प्रभाव यहाँ cheesily-चरम है, प्रदर्शन करने के लिए क्या संभव है indended।
अधिक ब्राउज़रों के साथ संगतता के लिए आप एक सामान्य सीमा तल और दाएं या ऊपर और बाएं जो केवल div के रंग से गहरे रंग के होते हैं, इन्सेट/आउटसेट सामग्री को अनुकरण करना चाहते हैं, वास्तव में स्टैक ओवरफ्लो क्या है वर्तमान में मेरे ब्राउज़र में टैग के लिए उपयोग कर रहे हैं।
जो मैं चाहता हूं उसके करीब लगता है, लेकिन कोण बाईं ओर और नीचे दाईं ओर गलत हैं। – Hamster
@Marnix <- क्या यह टैग द्वारा आपका मतलब है? – thesowismine
@thesowismine पुराने टैग (प्रश्न के विषयों) में सीमा की तरह एक बटन था, लेकिन उन्होंने शैली बदल दी और अब उनके पास एक फ्लैट लेआउट है। तो यह वास्तव में अब लागू नहीं होता है। मुझे उस समय एक स्नैपशॉट लेना चाहिए था। – Marnix