TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare ombre scatola con CSS?

20

La proprietà CSS "box-shadow" ti consente di creare semplici effetti di ombra sugli elementi della tua pagina. Puoi usare questa proprietà per creare bellissimi riquadri con effetto ombra in alto, in basso, a destra e a sinistra. In questo tutorial useremo: prima dello pseudo elemento per creare diversi stili di effetto ombra in una casella di testo.

Correlati: come convertire l’icona impressionante del carattere in un’immagine?

Sintassi delle proprietà CSS box-shadow

La sintassi della proprietà box-shadow è la seguente:

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

Di seguito è riportato un esempio di box-shadow: 10px 10px 10px 10px inserto verde; viene utilizzato con un elemento div:

Ombra scatola con inserto

Il valore inserito indica che la direzione dell’ombra dovrebbe essere all’interno dell’elemento. È possibile utilizzare l’inizio per creare l’effetto ombra all’esterno dell’elemento.

Come creare effetti ombra con CSS?

Passiamo alla creazione di un effetto ombra utilizzando lo pseudo elemento CSS. Per prima cosa crea una casella utilizzando il codice CSS sottostante. Lasciamo la casella senza definire le dimensioni, se vuoi utilizzare valori di altezza e larghezza specifici.

.box { background-color:#CDDC39; color: #333333; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: 1px solid #cccccc; margin: 20px; padding: 15px; font-size: 18px; }

Quindi, crea un’ombra con il seguente CSS:

.shadow { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .shadow:before { position: absolute; z-index: -1; display: block; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); content: ""; }

Mostreremo l’ombra sul lato sinistro e regoleremo la posizione usando i valori in basso e a sinistra.

.left-shadow:before { bottom: 25px; left: 20px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }

Simile all’ombra sinistra, definire stili separati per l’ombra destra, inferiore e semplice come di seguito.

.right-shadow:before { right: 20px; bottom: 25px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } .bottom-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .simple-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; }

HTML per effetti ombra

Per creare la scatola delle ombre abbiamo bisogno di usare una delle tre classi CSS sopra con HTML.

  • classe di scatola
  • classe ombra
  • scegli uno degli stili di ombra: ombra sinistra, ombra destra, ombra inferiore o ombra semplice

Ad esempio, di seguito è riportato il codice HTML per aggiungere l’ombra a sinistra a un elemento div:

<div class="box shadow left-shadow"> This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;". </div>

Demo degli effetti ombra CSS

Puoi regolare il CSS e creare effetti ombra destra, ombra inferiore e ombra semplice. Di seguito sono riportate alcune delle demo con effetti ombra CSS.

Effetto ombra lato sinistro

Questa è una casella di testo con l’ombra a sinistra. Il testo all’interno della casella è allineato con "altezza: 100 px; larghezza: 70%; margine: 20 px; padding: 15 px; dimensione carattere: 18 px;". L’ombra a sinistra è allineata con "bottom: 25px; left: 20px; width: 60%; height: 20px;".

Effetto ombra lato destro

Questa è una casella di testo con l’ombra a destra. Il testo all’interno della casella è allineato con "altezza: 100 px; larghezza: 70%; margine: 20 px; padding: 15 px; dimensione carattere: 18 px;". L’ombra a destra è allineata con "destra: 20 px; fondo: 25 px; larghezza: 60%; altezza: 20 px;".

Effetto ombra CSS inferiore

Questa è una casella di testo con l’ombra inferiore. Il testo all’interno della casella è allineato con "altezza: 100 px; larghezza: 70%; margine: 20 px; padding: 15 px; dimensione carattere: 18 px;". L’ombra in basso è allineata con "destra: 20 px; fondo: 0; sinistra: 20 px; altezza: 30 px;".

Semplice Shadow Box CSS

Questa è una casella di testo con una semplice ombra. Il testo all’interno della casella è allineato con "altezza: 100 px; larghezza: 70%; margine: 20 px; padding: 15 px; dimensione carattere: 18 px;". L’ombra è allineata con "destra: 20 px; fondo: 0; sinistra: 20 px; altezza: 30 px;".

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More