box-shadow: existe-t-il une "box-shadow-color"?

Question

Note: novice CSS ici. Sois gentil. ;-)

J'ai le CSS suivant:

  ...
 -webkit-box-shadow: inset 0px 0px 2px #a00;
 -moz-box-shadow: inset 0px 0px 2px #a00;
 ...
 

Maintenant, j'essaie d'extraire cette couleur pour rendre les couleurs de la page "skinnables". Y a-t-il une manière de faire ça? Le simple fait de supprimer la couleur, puis d'utiliser à nouveau la même clé écrase ultérieurement la règle d'origine.

Il ne semble pas y avoir de -webkit-box-shadow-color , au moins, Google ne révèle rien.

Answer 1

En fait... tout y est! En quelque sorte. box-shadow par défaut est color, tout comme border .

Selon http://dev.w3.org/.../#the-box-shadow

La couleur est la couleur de l'ombre. Si la couleur est absente, la la couleur est prise à partir de la "couleur" de la propriété.

Dans la pratique, vous devez changer l' color de la propriété et de quitter box-shadow sans code couleur:

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

Découvrez la démo

Support:

• Safari 6+
• Chrome 20+ (au moins)
• Firefox 13+ (au moins)
• IE9+ (IE8 ne prend pas en charge box-shadow )

Answer 2

Non:

http://dev.w3.org/csswg/css3-background/#the-box-shadow

Vous pouvez le vérifier sur Chrome et Firefox, par la vérification de la liste de calculé les styles. D'autres propriétés qui ont abréviation méthodes (comme border-radius) ont leurs variations définies dans la spécification.

Afin d'obtenir ce que vous voulez faire, vous devrez analyser la couleur de la valeur de la propriété et de le remplacer par quelque chose d'autre (par exemple avec du JavaScript string.prototype.replace méthode).

Answer 3

Vous pouvez utiliser un CSS pré-processeur pour faire votre dépouillement. Avec Sass vous pouvez faire quelque chose de similaire à ceci:

_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;

Si ce n'est pas à l'échelle du site de la thématisation de la classe mais en fonction du thème que vous avez besoin, alors vous pouvez faire ceci: http://codepen.io/jjenzz/pen/EaAzo

Answer 4

Un rapide et copier / coller que vous pouvez utiliser pour Chrome et Firefox serait: (changez le contenu après le # pour changer la couleur)

 -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;
 

La réponse de Matt Roberts est correcte pour les navigateurs Web (safari, chrome, etc.), mais je pensais que quelqu'un pourrait souhaiter une réponse rapide plutôt que de se voir demander d'apprendre à programmer pour créer des ombres.

Answer 5

C’est peut-être nouveau (je suis aussi assez nul sur css3), mais j’ai une page qui utilise exactement ce que vous suggérez:

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

.. et cela fonctionne très bien pour moi (dans Chrome au moins).