Come creare un ombra per una tabella Web

June 28

Se si desidera aggiungere un aspetto tridimensionale a una tabella in una pagina web, si può dare una "goccia ombra". Non vi è alcun modo per aggiungere un'ombra solo con l'aggiunta di un codice per la tabella stessa, ma lo si può fare con i CSS il codice (Cascading Style Sheet), che definisce lo stile di un elemento HTML. Sarà inoltre necessario prendere le misure necessarie per creare un'immagine di ombra in un programma.

istruzione

Creare l'immagine dell'ombra

1 Aprire un programma di editing di immagini che vi permetterà di creare un'immagine con uno sfondo trasparente. Vai su "File", "Nuovo" e impostare le dimensioni di 800 pixel di larghezza per 800 pixel di altezza. Impostare lo sfondo trasparente.

2 Fare clic sullo strumento sezione di rettangolo e fare clic sull'angolo in alto a sinistra del nuovo documento. Trascinarlo verso il basso verso l'angolo in basso a destra del documento per effettuare la selezione, ma non includono tutta la strada verso l'angolo in basso a destra. Lasciare la stessa quantità di spazio dal lato destro del documento e il bordo inferiore (circa 10 pixel).

3 Clicca su una luce o medio tonalità di grigio nella tavolozza dei colori e scegliere la o strumento di "Fill" "Secchiello". Fare clic sulla selezione per riempirlo con la sfumatura di grigio. Fai clic destro sulla selezione di de-selezionarlo.

4 Vai al menu "Effetti" nel programma e selezionare la funzione "Blur". La parte inferiore e destro della zona grigia si è creato sarà sfocare (negli spazi 10 pixel che hai lasciato sul lato destro e lato inferiore) e l'interno della zona grigia sarà ancora guardare solido.

5 Fare clic sullo strumento di selezione di nuovo e selezionare l'angolo in alto a sinistra per i bordi interni dei bordi sfocati (il bordo della parte solida). Fare clic su "Elimina" per isolare la destra offuscata e lati inferiori. Salvare il documento come immagine PNG in modo che possa mantenere lo sfondo trasparente.

Crea il codice

6 Carica l'immagine ombra al server, oppure a un sito di hosting di immagini gratuito, per dare l'immagine di un URL (http://hostingsite.com/shadowbackground.png).

7 Inserire il CSS (Cascading Style Sheet) codice tra i tag <head> </ head> del codice HTML della pagina in cui si desidera inserire la tabella.

<Style type = "text / css">

tavolo {

fondo: url (http://hostingsite.com/shadowbackground.png) no-repeat in basso a destra;

margin: 10px 10px -10px -10px;

}

</ Style>

Assicurarsi che l'URL per l'immagine è dopo "background" e le dimensioni dei margini sono gli stessi che la quantità di spazio che avete lasciato sul bordo inferiore dell'immagine destra e. Se si dispone già di CSS che definisce lo stile della tua pagina web, basta inserire il codice per la tabella nel CSS esistente.

8 Inserisci il codice per la vostra tavola, nel codice HTML del documento, dove vuoi che appaia sulla pagina (ovunque tra i tag <body> </ body>):

<Table>

<Tr> <td> Si tratta di una cella. </ Td> <td> Questa è un'altra cella. </ Td> </ tr>

<Tr> <td> prima cella nella seconda riga. </ Td> <td> seconda cella nella seconda riga. </ Td> </ tr>

</ Table>

Salvare il documento HTML della pagina e ricaricare la pagina per vedere la vostra tavola con un ombra.

Consigli e avvertenze

  • Per aggiungere più righe al vostro tavolo, basta inserire la sequenza <tr> <td> </ td> <td> </ td> </ tr> sotto l'ultima riga e prima del </ table> tag. È inoltre possibile aggiungere più cellule con l'aggiunta più <td> </ td> tag tra tag <tr> </ tr>.