Ombretto con css

Question

Voglio aggiungere un ombretto trasparente al mio div. Ho un contenitore, e dietro di esso voglio mettere un ombretto. Non voglio che il dropshadow abbia un colore. Questo è quello che ho finora:

.content_right1{ 

    background:#fff; 

    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius:10px; 

    -moz-box-shadow: 5px 5px 5px #99CCFF; 
    -webkit-box-shadow: 5px 5px 5px #99CCFF ; 
    box-shadow: 5px 5px 5px #99CCFF; 

    /* other styles of the class */ 
    width:380px; 
    float:left; 

    margin-left:3px; 
    padding:15px; 

    min-height:450px; 
    margin-left:15px; 
} 

voglio aggiungere l'opacità, ma quando lo faccio l'opacità di tutto cambia div.

Answer 1

Mentre la tua domanda è in definitiva un po 'opaca (gioco di parole), la seguente cosa fa ciò che ti aspetti?

-moz-box-shadow: 5px 5px 5px #dddddd; 
-webkit-box-shadow: 5px 5px 5px #dddddd; 
box-shadow: 5px 5px 5px #dddddd; 

http://jsfiddle.net/zCTC8/2/

Tutto quello che essenzialmente fatto è stato regolare il valorecolore dell'ombra, che è l'ultimo valore della dichiarazione (#dddddd, o #ddd). Questi sono valori esadecimali. Vedi qui per ulteriori esempi:

http://html-color-codes.com/

#ddd/#dddddd rappresenta un colore grigio chiaro; #eee è più leggero, #ccc è più scuro, #fff è bianco e #000 è nero. Il valore #000 rappresenta RGB, con valori validi di 0-9A-F (Dark-> luce), in modo che:

#f00 = red (R) 
#0f0 = green (G) 
#00f = blue (B) 

valore #99CCFFfrom your question è equivalente a #9CF, che dà un rosso centrale (9), un verde chiaro (C) e bianco (F). Il mix di questi valori ti dà la tonalità blu chiaro che stavi vedendo, ed è per questo che stavi ottenendo un colore invece di un colore "simile all'ombra" (sfumatura grigia).

La mia teoria dei colori è un po 'arrugginita qui, quindi chiunque mi corregga se ho spifferato qualcosa.

Answer 2

Se si desidera un dropshadow con un livello di opacità, si dovrebbe usare RGBA() per il suo colore dell'ombra:

http://css-tricks.com/2151-rgba-browser-support/

edit:

-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3); 
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3); 
box-shadow:5px 5px 5px rgba(0,0,0,0.3);