web-dev-qa-db-fra.com

Existe-t-il une propriété 'box-shadow-color'?

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.

csscss3box-shadow
159
Epaga

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.

105
Andy E

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;

Soutien

  • Safari 6+ 
  • Chrome 20+ (au moins)
  • Firefox 13+ (au moins)
  • IE9 + (IE8 ne supporte pas box-shadow du tout) 

Démo

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é :)

268
bfred.it

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

4
jjenzz

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 */
}
0
sandeep kumar