116
मैं फ़ोटोशॉप मॉक-अप में एक बटन शैली को दोहराने की कोशिश कर रहा हूं जिसमें दो छायाएं हैं। पहली छाया एक आंतरिक लाइटर बॉक्स छाया (2 पीएक्स) है, और दूसरा बटन (5 पीएक्स) के बाहर एक ड्रॉप छाया है।क्या एक तत्व पर दो CSS3 बॉक्स छाया का उपयोग करने का कोई तरीका है?
फ़ोटोशॉप में इस आसान है - इनर छाया और ड्रॉप छाया। सीएसएस में मैं स्पष्ट रूप से एक या दूसरे को देख सकता हूं, लेकिन दोनों एक ही समय में नहीं।
यदि आप ब्राउज़र में नीचे दिए गए कोड को आज़माते हैं, तो आप देखेंगे कि बॉक्स-छाया इंसेट बॉक्स-छाया को ओवरराइड करता है।
यहाँ इनसेट बॉक्स छाया है:
box-shadow: inset 0 2px 0px #dcffa6;
और यह मैं बटन पर ड्रॉप छाया के लिए क्या चाहते हैं: (
box-shadow: 0 2px 5px #000;
संदर्भ के लिए, यहाँ मेरा पूरा बटन कोड है ढ़ाल के साथ और सभी):
button {
outline: none;
position: relative;
width: 160px;
height: 40px;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 800;
font-size: 12px;
text-shadow: 0px 1px 3px black;
border-radius: 3px;
background-color: #669900;
background: -webkit-gradient(linear, left top, left bottom, from(#97cb52), to(#669900));
background: -moz-linear-gradient(top, #97cb52, #669900);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#97cb52', endColorstr='#669900');
box-shadow: inset 0 2px 0px #dcffa6;
box-shadow: 0 2px 5px #000;
border: 1px solid #222;
cursor: pointer;
}
किंवदंती, धन्यवाद! वह अच्छा और आसान था। –
आपका स्वागत है; मदद करने में खुशी हुई! =) –
यह भी उल्लेख करें कि पहली घोषित छाया निम्न में से एक है http://jsfiddle.net/webtiki/s9pkj/ –