Uguale all'aggiornamento 3, ma con le moderne regole CSS (= meno) in modo che non sia richiesto alcun posizionamento speciale sullo pseudo-elemento.
#box (colore di sfondo: # 3D6AA2; larghezza: 160 px; altezza: 90 px; posizione: assoluta; in alto: calc (10% - 10 px); sinistra: calc (50% - 80 px);) .box-shadow: dopo ( contenuto: ""; posizione: assoluta; larghezza: 100%; fondo: 1px; z-index: -1; trasformazione: scala (.9); box-shadow: 0px 0px 8px 2px # 000000;)
AGGIORNAMENTO 3
#box (colore di sfondo: # 3D6AA2; larghezza: 160 px; altezza: 90 px; margine superiore: -45 px; margine sinistro: -80 px; posizione: assoluta; superiore: 50%; sinistra: 50%;) .box- shadow: after (content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px # 000000; -moz-box-shadow: 0px 0px 8px 2px # 000000; box-shadow: 0px 0px 8px 2px # 000000;)
AGGIORNAMENTO 2
Apparentemente puoi farlo solo con il parametro tag css box extra come tutti gli altri hanno appena specificato. Ecco una dimostrazione:
Webkit-box-shadow: 0 4px 4px -2px # 000000; -moz-box-shadow: 0 4px 4px -2px # 000000; box-shadow: 0 4px 4px -2px # 000000;
Questa sarebbe la soluzione migliore. Il parametro aggiuntivo che viene aggiunto è descritto come:
La quarta lunghezza è la distanza di diffusione. I valori positivi fanno sì che la forma dell'ombra espanda la direzione lungo il raggio specificato. I valori negativi fanno sì che la forma dell'ombra sia d'accordo.
AGGIORNARE
Quello che ho fatto è stato creare un "elemento ombra" che si nascondesse dietro l'elemento reale che vorresti avere nell'ombra. Ho reso la larghezza dell'"elemento ombra" esattamente meno ampia dell'elemento effettivo, 2 volte l'ombra specificata; quindi l'ho allineato correttamente.
#wrapper (larghezza: 84px; posizione: relativa;) #elemento (colore di sfondo: # 3D668F; altezza: 54 px; larghezza: 100%; posizione: relativa; indice z: 10;) #ombra (colore di sfondo: # 3D668F; altezza: 8px; larghezza: 80px; margine sinistro: -40px; posizione: assoluta; fondo: 0px; sinistra: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px # 000000; - moz-box-shadow: 0px 2px 4px # 000000; box-shadow: 0px 2px 4px # 000000;)
Risposta originale
Sì, puoi farlo con la stessa sintassi che hai fornito. Il primo valore controlla il posizionamento orizzontale e il secondo valore controlla il posizionamento verticale. Quindi imposta il primo valore su 0px e il secondo su un offset arbitrario che vorresti fare in questo modo.
Le ombre normali sono facili da implementare con box-shadow o text-shadow. Ma cosa succede se hai bisogno di creare ombre interiori? Questo articolo descrive come creare queste ombre con poche righe di codice.
Sintassi
Innanzitutto, diamo un'occhiata a due modi principali per implementare le ombre esterne nei CSS.scatola-ombra
Design scatola-ombra contiene diversi valori:
Offset orizzontale e offset verticale- spostamento orizzontale e verticale, rispettivamente. Questi valori indicano in quale direzione l'oggetto proietterà l'ombra:
Raggio di sfocatura e raggio di diffusione un po' più complicato. Qual'è la differenza tra loro? Diamo un'occhiata a un esempio con due elementi, dove i valori raggio di sfocatura differire:
Il bordo dell'ombra è semplicemente sfocato. Con un valore diverso raggio di diffusione vediamo quanto segue:
In questo caso, vediamo che l'ombra è sparsa su una vasta area. Se non specifichi i valori raggio di sfocatura e raggio di diffusione, allora saranno uguali a 0.
testo-ombra
La sintassi è molto simile a scatola-ombra:
I valori sono gli stessi, solo che no ombra diffusa... Esempio di utilizzo:
Inset to box-shadow
Per "capovolgere" l'ombra all'interno dell'oggetto, è necessario aggiungere inserto nel CSS:
Una volta compresa la sintassi di base di box-shadow, è molto facile comprendere i principi dell'implementazione delle ombre interne. I valori sono gli stessi, puoi aggiungere un colore (da RGB a esadecimale):
Il colore è in formato RGB, il valore alfa è responsabile della trasparenza dell'ombra:
Immagini con ombre
Aggiungere un'ombra interna a un'immagine è un po' più difficile rispetto a una normale. div... Per cominciare, ecco il solito codice immagine: 
È logico supporre di poter aggiungere un'ombra come questa:
Img (box-shadow: inset 0px 0px 10px rgba (0,0,0,0,5);)
Ma l'ombra non è visibile:
Esistono diversi modi per risolvere questo problema, ognuno con i propri pro e contro. Consideriamone due. Il primo è avvolgere l'immagine in una normale div:
Div (altezza: 200px; larghezza: 400px; box-shadow: inset 0px 0px 10px rgba (0,0,0,0.9);) img (altezza: 200px; larghezza: 400px; posizione: relativa; z-index: -2 ;)
Tutto funziona, ma devi aggiungere un po' di markup HTML e CSS in più. Il secondo modo è impostare l'immagine come sfondo del blocco desiderato:
Div (altezza: 200px; larghezza: 400px; sfondo: url (http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba (0,0,0,0.9); )
Ecco cosa puoi ottenere usando le ombre interne:
Inset to text-shadow
Per implementare l'ombra interna del testo, una semplice aggiunta al codice inserto non funziona:
Per risolvere, applica prima al titolo h1 imposta uno sfondo scuro e un'ombra chiara:
H1 (colore di sfondo: # 565656; colore: trasparente; ombra di testo: 0px 2px 3px rgba (255,255,255,0,5);)
Ecco cosa succede:
Aggiungere l'ingrediente segreto clip di sfondo che taglia tutto al di fuori del testo (su uno sfondo scuro):
H1 (colore di sfondo: # 565656; colore: trasparente; ombra di testo: 0px 2px 3px rgba (255,255,255,0.5); -webkit-background-clip: testo; -moz-background-clip: testo; clip di sfondo: testo ;)
Si è rivelato quasi ciò di cui abbiamo bisogno. Ora scurisci un po' il testo (alpha) e il risultato:
informazioni brevi
Versioni CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Descrizione
Aggiunge un'ombra esterna a un elemento. È consentito utilizzare più ombre, specificando i loro parametri separati da virgole, quando si sovrappongono le ombre, la prima ombra nell'elenco sarà più alta, l'ultima in basso. Se viene impostato un raggio di arrotondamento per un elemento tramite la proprietà border-radius, anche l'ombra avrà gli angoli arrotondati. L'aggiunta di un'ombra esterna aumenta la larghezza dell'elemento, quindi nel browser potrebbe apparire una barra di scorrimento orizzontale.
Sintassi
box-shadow: nessuno |<тень> [,<тень>]*
dove<тень>:
inserto<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
I valori
nessuno Annulla l'aggiunta di un'ombra esterna. inset L'ombra viene disegnata all'interno dell'elemento. Parametro opzionale. x-offset L'offset orizzontale dell'ombra rispetto all'elemento. Un valore positivo per questo parametro imposta lo spostamento dell'ombra a destra, negativo - a sinistra. Parametro richiesto. y-offset L'offset verticale dell'ombra rispetto all'elemento. Un valore positivo sposta l'ombra verso il basso, un valore negativo verso l'alto. Parametro richiesto. sfocatura Specifica il raggio di sfocatura dell'ombra. Maggiore è questo valore, più l'ombra è levigata, diventa più ampia e più chiara. Se questo parametro non è specificato, il valore predefinito è 0, rendendo l'ombra chiara anziché sfocata. Allunga Un valore positivo allunga l'ombra, un valore negativo la rimpicciolisce. Se questo parametro non viene specificato, il valore predefinito è 0 e l'ombra avrà le stesse dimensioni dell'elemento. color Il colore dell'ombra in qualsiasi formato CSS disponibile, per impostazione predefinita l'ombra è nera. Parametro opzionale.È consentito specificare più ombre, separando i loro parametri con una virgola. Viene preso in considerazione il seguente ordine: la prima ombra nell'elenco è posizionata in cima, l'ultima nell'elenco - in fondo.
HTML5 CSS3 IE Cr Op Sa Fx
Il risultato dell'esempio è mostrato in Fig. 1.
Riso. 1. Vista dell'ombra nel browser Safari
Browser
Safari fino a 5.1, Chrome fino a 10.0, Android fino a 4.0 e iOS Safari fino a 5.0 supportano la proprietà -webkit-box-shadow.
Firefox prima della 4.0 supporta la proprietà -moz-box-shadow.
Internet Explorer prima della versione 9.0 non supporta la proprietà box-shadow; invece, puoi utilizzare la proprietà del filtro non standard:
Filtro: progid: DXImageTransform.Microsoft.dropshadow (offX = 5, offY = 5, color = # 000000);
Qui: offX - spostamento orizzontale dell'ombra; offY - spostamento verticale dell'ombra; colore - colore dell'ombra.
L'applicazione del filtro ombra produce un'ombra nitida e nitida, quindi puoi utilizzare il filtro ombra per l'effetto sfocatura.
Filtro: progid: DXImageTransform.Microsoft.shadow (direzione = 120, colore = # 000000, forza = 10);
Qui: direzione - l'angolo della direzione dell'ombra da 0 a 360 °; colore - colore dell'ombra; forza - offset dell'ombra in pixel.
La proprietà CSS box-shadow ti consente di impostare un'ombra per un elemento html. Viene utilizzato abbastanza spesso dai progettisti di siti Web per decorare ed evidenziare in qualche modo i frame con testo, immagini e rendere i contenuti più leggibili.
Sintassi CSS box-shadow
... box-ombra: colore X Y R1 R2; ...
- X - offset lungo l'asse X (orizzontale)
- Y - offset lungo l'asse Y (verticale)
- R1 - sfocatura (più alto è il valore, più fluida è la transizione)
- R2 - raggio di allungamento (se positivo, quindi si estende, negativo - si comprime)
- colore - colore (può essere impostato in qualsiasi formato: #RGB, nome del colore)
- inset - se questo valore è presente, l'ombra si troverà all'interno del blocco (elemento)
Esempio 1: cornice HTML con box-shadow senza offset
Di seguito è riportato l'uso più semplice della proprietà CSS box-shadow su una pagina html, quando avvolge uniformemente l'intero frame senza offset.
Esempio 1. Cornice con ombra
Esempio 1. Cornice con ombra
Esempio 2. Cornice HTML con offset box-shadow
Quasi lo stesso esempio del primo, ma solo con uno spostamento dell'inquadratura.
Esempio n. 2. Cornice ombra sfalsata
La pagina viene convertita nella seguente
Esempio n. 2. Offset cornice ombra
Esempio n. 3. Bagliore di bordo HTML
Implementazione di un'ombra come bagliore
Esempio n. 3. Incandescenza
La pagina viene convertita nella seguente
Esempio n. 3. Incandescenza
Esempio 4. Bagliore interno del bordo html
Un bagliore che è diretto verso l'interno del blocco e non va oltre i suoi limiti in alcun modo. L'effetto viene creato tramite l'attributo inset.
Esempio n. 4. Bagliore interno
La pagina viene convertita nella seguente
Esempio n. 4. Bagliore interno
Esempio 5. Combinazione di ombre in html
L'effetto ombra può essere combinato con le virgole. In questo caso si ottengono risultati molto interessanti. Ad esempio, puoi creare una cornice 3D multicolore.
Esempio n. 5. Fusione di ombre
La pagina viene convertita nella seguente
Esempio n. 5. Fusione di ombre
Nota: browser meno recentiIE prima della versione 9 non supporta box-shadow. Prefissi del browser per box-shadow
- -webkit-box-shadow - per Chrome fino a 10, Safari fino a 5.1, Android fino a 4 e iOS fino a 5
- -moz-box-shadow - per Firefox fino alla versione 4.0
Le ombre normali sono facili da implementare con box-shadow o text-shadow. Ma cosa succede se hai bisogno di creare ombre interiori? Questo articolo descrive come creare queste ombre con poche righe di codice.
Sintassi
Innanzitutto, diamo un'occhiata a due modi principali per implementare le ombre esterne nei CSS.scatola-ombra
Design scatola-ombra contiene diversi valori:
Offset orizzontale e offset verticale- spostamento orizzontale e verticale, rispettivamente. Questi valori indicano in quale direzione l'oggetto proietterà l'ombra:
Raggio di sfocatura e raggio di diffusione un po' più complicato. Qual'è la differenza tra loro? Diamo un'occhiata a un esempio con due elementi, dove i valori raggio di sfocatura differire:
Il bordo dell'ombra è semplicemente sfocato. Con un valore diverso raggio di diffusione vediamo quanto segue:
In questo caso, vediamo che l'ombra è sparsa su una vasta area. Se non specifichi i valori raggio di sfocatura e raggio di diffusione, allora saranno uguali a 0.
testo-ombra
La sintassi è molto simile a scatola-ombra:
I valori sono gli stessi, solo che no ombra diffusa... Esempio di utilizzo:
Inset to box-shadow
Per "capovolgere" l'ombra all'interno dell'oggetto, è necessario aggiungere inserto nel CSS:
Una volta compresa la sintassi di base di box-shadow, è molto facile comprendere i principi dell'implementazione delle ombre interne. I valori sono gli stessi, puoi aggiungere un colore (da RGB a esadecimale):
Il colore è in formato RGB, il valore alfa è responsabile della trasparenza dell'ombra:
Immagini con ombre
Aggiungere un'ombra interna a un'immagine è un po' più difficile rispetto a una normale. div... Per cominciare, ecco il solito codice immagine:
È logico supporre di poter aggiungere un'ombra come questa:
Img (box-shadow: inset 0px 0px 10px rgba (0,0,0,0,5);)
Ma l'ombra non è visibile:
Esistono diversi modi per risolvere questo problema, ognuno con i propri pro e contro. Consideriamone due. Il primo è avvolgere l'immagine in una normale div:
Div (altezza: 200px; larghezza: 400px; box-shadow: inset 0px 0px 10px rgba (0,0,0,0.9);) img (altezza: 200px; larghezza: 400px; posizione: relativa; z-index: -2 ;)
Tutto funziona, ma devi aggiungere un po' di markup HTML e CSS in più. Il secondo modo è impostare l'immagine come sfondo del blocco desiderato:
Div (altezza: 200px; larghezza: 400px; sfondo: url (http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba (0,0,0,0.9); )
Ecco cosa puoi ottenere usando le ombre interne:
Inset to text-shadow
Per implementare l'ombra interna del testo, una semplice aggiunta al codice inserto non funziona:
Per risolvere, applica prima al titolo h1 imposta uno sfondo scuro e un'ombra chiara:
H1 (colore di sfondo: # 565656; colore: trasparente; ombra di testo: 0px 2px 3px rgba (255,255,255,0,5);)
Ecco cosa succede:
Aggiungere l'ingrediente segreto clip di sfondo che taglia tutto al di fuori del testo (su uno sfondo scuro):
H1 (colore di sfondo: # 565656; colore: trasparente; ombra di testo: 0px 2px 3px rgba (255,255,255,0.5); -webkit-background-clip: testo; -moz-background-clip: testo; clip di sfondo: testo ;)
Si è rivelato quasi ciò di cui abbiamo bisogno. Ora scurisci un po' il testo (alpha) e il risultato:
