Gibt es eine 'Box-Shadow-Color'-Eigenschaft?

193

Ich habe folgendes CSS:

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

Jetzt versuche ich, diese Farbe zu extrahieren, um die Seitenfarben "skinnbar" zu machen. Gibt es eine Möglichkeit, dies zu tun? Durch einfaches Entfernen der Farbe und anschließendes erneutes Verwenden desselben Schlüssels wird die ursprüngliche Regel überschrieben.

Es scheint keine zu geben box-shadow-color, zumindest taucht Google nichts auf.

Epaga
quelle
17
Google dreht nichts zurück wegen "-" zu Beginn der Abfrage :)
Elon

Antworten:

129

Nein:

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

Sie können dies in Chrome und Firefox überprüfen, indem Sie die Liste der berechneten Stile überprüfen. Bei anderen Eigenschaften mit Kurzmethoden (wie border-radius) sind die Variationen in der Spezifikation definiert.

Wie bei den meisten fehlenden "Long-Hand" -CSS-Eigenschaften können CSS-Variablen dieses Problem lösen:

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

#el:hover {
    --box-shadow-color: goldenrod;
}
Andy E.
quelle
6
Das ist eine großartige Verwendung von Variablen! Hoffen wir, dass sie in den nächsten Jahren in allen Browsern unterstützt werden : /
fregante
3
Ab 2019 unterstützen alle gängigen Browser CSS-Variablen .
Railgun
1
... es sei denn, Sie müssen IE noch unterstützen 😭
Cam Jackson
301

Eigentlich ... gibt es! Art von. box-shadowDer Standardwert colorist genau wie border.

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

Die Farbe ist die Farbe des Schattens. Wenn die Farbe nicht vorhanden ist, wird die verwendete Farbe aus der Eigenschaft 'Farbe' übernommen.

In der Praxis müssen Sie die colorEigenschaft ändern und box-shadowohne Farbe verlassen:

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

Unterstützung

  • Safari 6+
  • Chrome 20+ (mindestens)
  • Firefox 13+ (mindestens)
  • IE9 + (IE8 unterstützt überhaupt nicht box-shadow)

Demo

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>

Der im Kommentar unten erwähnte Fehler wurde inzwischen behoben :)

fregante
quelle
3
Es gibt einen Fehler in Chrome 22 (Kanarienvogel) in CSS-Animationen, der dazu führt, dass Box-Shadow die animierte colorEigenschaft nicht erbt . code.google.com/p/chromium/issues/detail?id=133745
David Murdoch
14
Guter Hack, wenn das Element keinen Text enthält.
Phoenix
10
Ja, sonst müssten Sie es einpacken und erneut colorauf das untergeordnete Element anwenden .
Fregante
3
Ich kann bestätigen, dass es für IE10 dasselbe ist.
MaxArt
4
Vielen Dank für eine vernünftige und relevante Antwort. +10 für dich!
Kumarshar
4

Sie können einen CSS-Vorprozessor verwenden, um Ihr Skinning durchzuführen. Mit Sass können Sie etwas Ähnliches tun:

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

Wenn Sie kein Site-weites, sondern ein klassenbasiertes Theming benötigen, können Sie dies tun: http://codepen.io/jjenzz/pen/EaAzo

jjenzz
quelle
2

Sie können dies mit der CSS-Variablen tun

.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
quelle
-3

Ein schnelles Kopieren / Einfügen, das Sie für Chrome und Firefox verwenden können, wäre: (Ändern Sie das Material nach dem #, um die Farbe zu ändern.)

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

Die Antwort von Matt Roberts ist für Webkit-Browser (Safari, Chrome usw.) korrekt, aber ich dachte, jemand da draußen möchte vielleicht eine schnelle Antwort, anstatt zu lernen, wie man programmiert, um Schatten zu erzeugen.

Däne Calderon
quelle
-5

Ja, es gibt einen Weg

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

Vielleicht ist das neu (ich bin auch ziemlich beschissen bei CSS3), aber ich habe eine Seite, die genau das verwendet, was Sie vorschlagen:

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

.. und es funktioniert gut für mich (zumindest in Chrome).

Matt Roberts
quelle
14
Die Frage war, wie nur die Schattenfarbe der Box geändert werden kann .
Julian D.