Come fare Shadows CSS goccia

August 6

Ombre aggiungere un ulteriore livello di profondità al design Web e, se applicato correttamente, dovrebbe apparire pulito e sottile. È possibile aggiungere ombreggiature, senza l'uso di immagini con Cascading Style Sheets (CSS), che comprende la proprietà "box-shadow". Quasi ogni elemento HTML, compreso il corpo della pagina Web, è possibile utilizzare questa proprietà. Ombre per l'uso del testo quasi lo stesso codice con una proprietà diversa, chiamata "text-shadow".

istruzione

1 Aprire la pagina Web in Blocco note o un editor di codice e individuare i "<style>" tag tra i "<head>" tag. Aggiungere il "<style>" tag se non li trovate:

<Style type = "text / css">

</ Style>

2 Scorrere verso il basso nel codice fino a trovare l'elemento HTML si vuole dare un ombra. È possibile aggiungere ombreggiature a quasi tutto, compreso div, tabelle e immagini. Trovare il nome ID dei tag che creano l'elemento:

<Div id = "myDiv">

... Div contenuti ...

</ Div>

Aggiungere un ID al tag se non si vede uno già lì. Ogni tag può avere un solo ID, e non è possibile riutilizzare lo stesso ID sulla stessa pagina.

3 Aggiungere il selettore CSS tra le "<style>" tag, utilizzando un nome di ID di indirizzare un elemento HTML:

mydiv {}

4 Utilizzare la proprietà "box-shadow" tra le parentesi graffe del selettore per creare la tua ombra:

mydiv {

box-shadow: 5px 5px 10px rgba (0,0,0,0.5);

}

Il codice precedente crea un'ombra che viene compensato da cinque pixel dalla parte superiore e sinistra della DIV, ed il raggio di sfocatura è impostata su dieci pixel. L'ultimo valore è il colore dell'ombra esterna.

5 Aggiungere il valore ultimo colore, ad esempio "RGBA (0,0,0,0.5)" per creare il colore nero con trasparenza del 50 per cento. Sostituire ciascuno dei primi tre numeri nella RGBA (rosso, blu, verde e Alpha) codice con un valore di rosso, verde e blu per il colore che si desidera. È inoltre possibile utilizzare i codici esadecimali o nomi di colori, ma questi non si darà lo stesso effetto di trasparenza.

Consigli e avvertenze

  • Change "box-shadow" a "text-shadow" quando si desidera applicare un'ombra al testo. In caso contrario, la "scatola" che circonda il testo otterrà un ombra imbarazzante.
  • Creare ombre interiori con un "inserto" prima che il valore di offset prima della proprietà "box-shadow": "#mydiv {box-shadow: inserto 5px 5px 10px rgba (0,0,0,0.5);}".
  • Non tutti i browser supportano ombre. Internet Explorer 9 e di seguito non supporta le ombre del testo, e Internet Explorer 8 e sotto non supporta alcuna ombre. È possibile utilizzare un poli-riempire come CSS3 PIE per rendere Internet Explorer vedi drop ombre.