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

199

J'ai le CSS suivant:

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

J'essaie maintenant 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é plus tard, remplace la règle d'origine.

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

Epaga
la source

Réponses:

140

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. D'autres propriétés qui ont des méthodes abrégées (comme border-radius) ont leurs variations définies dans la spécification.

Comme pour la plupart des propriétés CSS "longues" 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;
}
Andy E
la source
6
C'est une excellente utilisation des variables! Espérons qu'ils seront pris en charge dans tous les navigateurs dans les prochaines années: /
fregante
1
... sauf si vous devez toujours supporter IE 😭
Cam Jackson
308

En fait… il y en a! Sorte de. box-shadowpar défaut color, tout comme le borderfait.

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

La couleur est la couleur de l'ombre. Si la couleur est absente, la couleur utilisée est tirée de la propriété 'color'.

En pratique, vous devez changer la colorpropriété et laisser box-shadowsans couleur:

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

Soutien

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

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 bogue mentionné dans le commentaire ci-dessous a depuis été corrigé :)

frégante
la source
3
Il y a un bogue dans Chrome 22 (canary) dans les animations CSS qui empêche box-shadow d'hériter de la colorpropriété animée . code.google.com/p/chromium/issues/detail?id=133745
David Murdoch
14
Bon hack, s'il n'y a pas de texte dans l'élément.
phoenix
11
Ouais, sinon vous devrez terminer et réappliquer colorà l'élément enfant.
fregante
3
Je peux confirmer que c'est la même chose pour IE10.
MaxArt
4
Merci pour une réponse sensée et pertinente . +10 à vous!
kumarharsh
5

Vous pouvez utiliser un pré-processeur CSS pour faire 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 ce n'est pas une thématisation à l'échelle du site mais une thématisation basée sur les classes dont vous avez besoin, vous pouvez le faire: http://codepen.io/jjenzz/pen/EaAzo

jjenzz
la source
2

Vous pouvez le faire avec la 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 */
}
sandeep kumar
la source
-3

Un copier / coller rapide que vous pouvez utiliser pour Chrome et Firefox serait: (changez le truc 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 Webkit (safari, chrome, etc.), mais je pensais que quelqu'un pourrait vouloir une réponse rapide plutôt que de se faire dire d'apprendre à programmer pour créer des ombres.

Dane Calderon
la source
-5

Oui il y a un moyen

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset
Ivan Jelev
la source
-8

Peut-être que c'est nouveau (je suis aussi assez merdique à 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 (au moins dans Chrome).

Matt Roberts
la source
16
La question était de savoir comment changer uniquement la couleur de l'ombre de la boîte.
Julian D.