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:
box-shadow: 5px 5px 10px 2px #333333; |
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/
