css - sombra - ¿Hay una propiedad ''box-shadow-color''?

shadow bottom css

Question

Tengo el siguiente CSS:

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

Ahora estoy tratando de extraer ese color para que los colores de la página sean ''ajustables''. ¿Hay alguna forma de hacer esto? Simplemente eliminando el color, y luego usando la misma clave otra vez, sobrescribe la regla original.

No parece haber un box-shadow-color , al menos Google no da vuelta nada.

Answer 1

En realidad ... ¡hay! Más o menos box-shadow predeterminado en color , al igual que border .

De acuerdo con http://dev.w3.org/.../#the-box-shadow

El color es el color de la sombra. Si el color está ausente, el color usado se toma de la propiedad ''color''.

En la práctica, debe cambiar la propiedad de color y dejar box-shadow sin un color:

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

Apoyo

• Safari 6+
• Chrome 20+ (al menos)
• Firefox 13+ (al menos)
• IE9 + (IE8 no es compatible con box-shadow en absoluto)

Manifestación

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>

El error mencionado en el comentario a continuación se ha corregido desde entonces :)

Answer 2

No:

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

Puede verificar esto en Chrome y Firefox revisando la lista de estilos computados. Otras propiedades que tienen métodos abreviados (como border-radius ) tienen sus variaciones definidas en la especificación.

Al igual que con la mayoría de las propiedades CSS perdidas "a mano", las variables CSS pueden resolver este problema:

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

#el:hover {
    --box-shadow-color: goldenrod;
}

Puedes probar esto en Firefox 31+. Desafortunadamente, en el momento de escribir esto, ningún otro navegador tiene una implementación funcional.

Answer 3

Podría usar un preprocesador CSS para hacer su skinning. Con Sass puedes hacer algo similar a esto:

_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 no se trata de un tema de todo el sitio, sino de una clase basada en el tema que necesita, puede hacerlo: http://codepen.io/jjenzz/pen/EaAzo

Answer 4

Sí, hay una manera

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

Answer 5

Tal vez esto es nuevo (también soy bastante basura en css3), pero tengo una página que usa exactamente lo que sugieres:

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

.. y funciona bien para mí (al menos en Chrome).

Answer 6

Un rápido y copiar / pegar que puede usar para Chrome y Firefox sería: (cambie las cosas después del # para cambiar el color)

-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 respuesta de Matt Roberts es correcta para navegadores de webkits (safari, cromo, etc.), pero pensé que alguien podría querer una respuesta rápida en lugar de que le dijeran que aprendiera a programar para hacer algunas sombras.