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".
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.