सीएसएस

Question

मैं सीएसएस कि निम्न छवि की तरह दिखता है में एक इनसेट ड्रॉप छाया प्रभाव की तरह एक असर पाने के लिए कोशिश कर रहा हूँ के साथ एक इनसेट अंधेरे ड्रॉप छाया प्रभाव बनाना:

image of sunken button http://gyazo.com/5c3178208bb904b3502a83a7490f7ffc.png

शरीर के किसी भी पता है कि कैसे मैं सीएसएस के साथ उस प्रभाव को प्राप्त कर सकते हैं?

Answer 1

जवाब पहले से ही आप (box-shadow: inset ..) को दिया गया है, इसलिए यहाँ यह कैसे काम कर सकता है की एक त्वरित प्रदर्शन है:

http://jsfiddle.net/L6nJj/

महत्वपूर्ण हिस्सा box-shadow: inset 2px 2px 3px 0 red है।

उपलब्ध विकल्पों में से एक स्पष्टीकरण के लिए: https://developer.mozilla.org/en/css/box-shadow#Values

खाते में, box-shadow के लिए ब्राउज़र समर्थन लेने के लिए है जो कि यह IE के पुराने संस्करणों में काम नहीं करता है, लेकिन बाकी काम करता है "हर जगह" सुनिश्चित करें: http://caniuse.com/css-boxshadow

Answer 2

विशेष रूप से, इन्सेट बॉक्स छाया को CSS3 box-shadow संपत्ति पर नज़र डालें। this article में उदाहरण एल को वह प्रभाव प्रदान करना चाहिए जो आप खोज रहे हैं।

Answer 3

कुंजी यहाँ कई बॉक्स छाया, शीर्ष बाएं से एक बड़ा गहरा एक इनसेट और thats नीचे एक बहुत ही सूक्ष्म छाया पृष्ठभूमि की तुलना में थोड़ा उज्जवल है।

सूचना बॉक्स छाया के रूप ", रंग एक्स-ऑफसेट, वाई-ऑफसेट, धुंधला"

कलंक मात्रा में और कई छाया का उपयोग करना सीखें और आप कुछ वास्तव में अच्छा प्रभाव बना सकते हैं।

.button { 
    display:inline-block; 
    padding: 10px 15px; 
    color: white; 
    border-radius: 20px; 
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333; 
}