bel grattacapo oggi…
fare l’ombra di un div ma solo nei due lati orizzontali sopra e sotto..
è una ombra interna che pare apra della fessure da cui esce un nastro che scorre verticalmente..
come fare?
Ho crato due div uno dentro l’altro; il secondo con position relative, così lo posso controllare solo rispetto a quello esterno;
questo è più comodo per andare poi a riposizionarlo nella pagina e far ein modo che non si scollino tra di loro 🙂
Quindi ho messo un effetto retinato a quello interno, riducendo la larghezza rispetto a quello esterno, ma mantenendolo alto uguale.
 
Poi ho valuato come si usa la caratteristica box shadow:
box-shadow può essere applicata a tutti gli elementi.
Vediamo subito uno snippet di codice con quella che è la sintassi di base:

La sintassi di base prevede la definizione di quattro valori numerici:

• Il primo valore (5px) imposta lo spostamento dell’ombra in senso orizzontale. Essendo il valore positivo, l’ombra viene collocata sul lato destro del box. Se si usano valori negativi l’ombra viene collocata sul lato sinistro.
• Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l’ombra viene collocata sul lato inferiore del box. Usando valori negativi l’ombra viene collocata sul lato superiore del box.
• Il terzo valore (10px) definisce il livello di sfocatura (blur radius) dell’ombra: più alto è questo valore, più sfocata apparirà l’ombra. Si usi 0 se si desidera un’ombra netta e senza sfocatura. Non sono permessi valori negativi.
• Il quarto valore (2px) imposta il livello di diffusione (spread radius) dell’ombra. Più i valori sono alti, più l’ombra tenderà ad espandersi, in tutte le direzioni. Se invece si usano valori negativi, l’ombra tende a contrarsi, fino a scomparire del tutto.

Di questi quattro valori, gli unici obbligatori sono i primi due. I valori della sfocatura e della diffusione, invece, possono essere omessi. Se non specificati, tali valori sono pari per default a 0.
Ultimo è il colore.
da http://www.html.it/pag/19453/box-shadow/
 
Quindi il primo per me deve essere 0; invece per il secondo ne dovrò fare due inmodo da davere un obra sopra ed una ombra sotto.
Il mio problema è che non sono ombre esterne, ma ombre interne al box..
e qui abbiamo!!

La parola chiave inset

Un ultimo valore possibile per box-shadow è rappresentato dalla parola chiave inset. Usando questo valore l’ombra non si colloca all’esterno del box, ma al suo interno.
 
e poi sorge il secondo problema!!
ma io ho bisogno di un’ombra da un lato solo!!! non da tutti e quattro o solo da due lati..
quindi!?!?!
Bisogna mettere innegativo il 4° valore, quello della diffusione dell’ombra..
bisogna stare un po attenti perchè è da calibrare e cmq l’ombra che si desidera da un solo alto non può essere accentuatuìissima altrimenti cominqcia a spuntare anche dagli altri..
Però la riuscita è buone..
Ecco il codice:
 
html:
<div id=”deco”><div id=”retina”> </div></div>
<span>11</span>
CSS:
#deco
{
margin-left: 15px;
margin-top: 40px;
position: absolute;
width:100px;
height: 630px;
box-shadow: -0px 7px 15px -13px #525252;
}
#retina
{
position: relative;
width:50px;
height:630px;
background:#009CAB;
opacity: 0.15;
margin: 0 auto;
}
però secondo me si vede sempre un pochino.. un difetto..
ecoo un altro metodo senza trick.. diciamo sintatti corretta logicamente:
imposti le tre ombre con colore bianco o quello che hai di sfondo e solo una con il colore scuro:
http://jsfiddle.net/LE6Lz/