J'ai le CSS suivant:
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 box-shadow-color
, au moins, Google n’affiche rien.
Non:
http://www.w3.org/TR/css3-background/#the-box-shadow
Vous pouvez le vérifier dans Chrome et Firefox en consultant la liste des styles calculés. Les autres propriétés qui ont des méthodes abrégées (comme border-radius
) ont leurs variations définies dans la spéc.
Comme avec la plupart des propriétés CSS manquantes, " Les variables CSS peuvent résoudre ce problème:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
Vous pouvez essayez ceci dans Firefox 31+. Malheureusement, au moment de la rédaction de cet article, aucun autre navigateur ne fonctionne correctement.
En fait… il y en a! Sorte de. box-shadow
est défini par défaut sur color
, comme le fait border
.
Selon http://dev.w3.org/.../#the-box-shadow
La couleur est la couleur de l'ombre. Si la couleur est absente, le utilisé la couleur provient de la propriété ‘color’.
En pratique, vous devez modifier la propriété color
et laisser box-shadow
sans couleur:
box-shadow: 1px 2px 3px;
color: #a00;
box-shadow
du tout) 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>
Le bug mentionné dans le commentaire ci-dessous a depuis été corrigé :)
Vous pouvez utiliser un pré-processeur CSS pour effectuer votre skinning. 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 vous avez besoin d'une thématisation à l'échelle du site mais d'une thématique de classe, vous pouvez le faire: http://codepen.io/jjenzz/pen/EaAzo
Vous pouvez le faire avec Variable CSS
.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 */
}