क्या a बॉक्स-शैडो-कलर ’संपत्ति है?

Question

मेरे पास निम्नलिखित सीएसएस हैं:

box-shadow: inset 0px 0px 2px #a00;

अब मैं पृष्ठ रंग को 'स्किनेबल' बनाने के लिए उस रंग को निकालने की कोशिश कर रहा हूं। ऐसा करने का कोई रास्ता नहीं है? बस रंग को हटाने, और फिर उसी कुंजी का उपयोग करके बाद में मूल नियम को ओवरराइट कर दिया जाता है।

ऐसा प्रतीत नहीं होता है box-shadow-color, कम से कम Google कुछ नहीं करता है।

Comments

Google क्वेरी की शुरुआत में "-" की वजह से कुछ भी पीछे नहीं

— हटता है

Answer 1

नहीं:

http://www.w3.org/TR/css3-background/#the-box-shadow

आप गणना की गई शैलियों की सूची की जांच करके क्रोम और फ़ायरफ़ॉक्स में इसे सत्यापित कर सकते हैं। अन्य गुण जिनके पास आशुलिपि विधियाँ हैं (जैसे border-radius) उनके रूपांतर युक्ति में परिभाषित हैं।

सबसे अधिक लापता "लंबे समय से हाथ" सीएसएस गुणों के साथ, सीएसएस चर इस समस्या को हल कर सकते हैं:

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}

Comments

यह चर का एक महान उपयोग है! चलिए आशा करते हैं कि अगले कुछ वर्षों के भीतर वे सभी ब्राउज़रों में समर्थित होंगे : /

— fregante

2019 तक, सभी प्रमुख ब्राउज़र सीएसएस चर का समर्थन करते हैं ।

— रेलगाड़ी

... जब तक आपको IE अभी भी समर्थन करना है you

— कैम जैक्सन

Answer 2

असल में ... वहाँ है! की तरह। box-shadowकी colorतरह ही चूकborder ।

Http://dev.w3.org/..//the-box-shadow के अनुसार

रंग छाया का रंग है। यदि रंग अनुपस्थित है, तो प्रयुक्त रंग 'रंग' संपत्ति से लिया गया है।

व्यवहार में, आपको colorसंपत्ति को बदलना होगा और छोड़ना होगाbox-shadow एक रंग के बिना :

box-shadow: 1px 2px 3px;
color: #a00;

सहयोग

• सफारी 6+
• Chrome 20+ (कम से कम)
• फ़ायरफ़ॉक्स 13+ (कम से कम)
• IE9 + (IE8 बिल्कुल समर्थन नहीं करता है box-shadow)

डेमो

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}

<div class="green"></div>
<div class="red"></div>

नीचे दी गई टिप्पणी में उल्लिखित बग को ठीक कर दिया गया है :)

Comments

सीएसएस एनिमेशन में क्रोम 22 (कैनरी) में एक बग है, जिससे बॉक्स-छाया को एनिमेटेड colorसंपत्ति विरासत में नहीं मिलती है । code.google.com/p/chromium/issues/detail?id=133745

— डेविड मर्डोक

अच्छा हैक, अगर तत्व में कोई पाठ नहीं है।

— फीनिक्स

हाँ, अन्यथा आपको इसे लपेटना होगा और colorफिर से बच्चे के तत्व तक पहुंचाना होगा।

— प्रातःकाल

मैं यह पुष्टि कर सकता हूँ कि यह IE10 के लिए समान है।

— मैक्सर्ट

समझदार और प्रासंगिक उत्तर के लिए धन्यवाद । +10 आप को!

— कुमारहर्ष 25'13

Answer 3

आप अपनी स्किनिंग करने के लिए CSS प्री-प्रोसेसर का उपयोग कर सकते हैं। सास के साथ आप ऐसा ही कुछ कर सकते हैं:

_theme1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

यदि यह विस्तृत थीमिंग नहीं है, लेकिन वर्ग आधारित थीम की आवश्यकता है, तो आप यह कर सकते हैं: http://codepen.io/jjenzz/pen/EaAzo

Answer 4

आप इसे सीएसएस चर के साथ कर सकते हैं

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}

Answer 5

क्रोम और फ़ायरफ़ॉक्स के लिए एक त्वरित और कॉपी / पेस्ट का उपयोग कर सकते हैं: (रंग बदलने के लिए # के बाद सामान बदलें)

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

मैट रॉबर्ट्स का जवाब वेबकिट ब्राउज़र (सफारी, क्रोम, आदि) के लिए सही है, लेकिन मैंने सोचा कि कोई व्यक्ति चाहता है कि कुछ छाया बनाने के लिए प्रोग्राम सीखने के बजाय एक त्वरित उत्तर दिया जाए।

Answer 6

हां वहां एक रास्ता है

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset

Answer 7

हो सकता है कि यह नया हो (मैं css3 में भी बहुत बकवास हूं), लेकिन मेरे पास एक ऐसा पेज है जो आपके सुझाव का सटीक उपयोग करता है:

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

.. और यह मेरे लिए ठीक काम करता है (क्रोम में कम से कम)।

Comments

सवाल था कि कैसे बदला जाए केवल बॉक्स शैडो कलर ।

— जूलियन डी।