Uno dei grandi misteri nel web design è come ottenere un effetto di ombreggiatura dietro l' area del contenuto principale , che spesso è bianco o di colore chiaro e indicato come il wrapper. Creare la giusta immagine in un editor di immagini , come Photoshop , è a metà dell'opera . Usando l'immagine come sfondo ripetendo in un tag div HTML è l'altra metà . L'immagine in realtà si trova all'interno di un proprio div all'interno del div "wrapper " sulla pagina . Istruzioni
1

Creare un nuovo documento in Photoshop , che è larga 840 pixel per 1000 pixel profonde . Fare doppio clic sul livello di sfondo nella palette Livelli per renderlo un livello modificabile . L'area di lavoro deve avere uno sfondo a scacchiera , a indicare la trasparenza .
2

creare un rettangolo sul palco utilizzando funzione " Marchese Rettangolo " ( rettangolo punteggiato ) nella barra degli strumenti a sinistra . Non preoccuparti per le dimensioni si disegna . Pulsante destro del mouse sulla casella e selezionare " Trasforma selezione . " Fare clic sulla casella in alto a sinistra nel "Punto Location di riferimento" indicatore nella barra degli strumenti nella parte superiore dell'area di lavoro . Si presenta come un Tic Tac Toe bordo di sorta. Questo orienta la tua coordinate x, y in alto a sinistra dell'area di lavoro . Nei campi del modulo di riferimento a destra dell'indicatore , impostate i vostri coordinata x 20 pixel e la larghezza di 800 pixel . Questo centra il rettangolo nel vostro spazio di lavoro e lascia 20 pixel su ogni lato per l'ombra . Fare doppio clic sul rettangolo per tornare al rettangolo di marchese . Fai clic destro su di esso, selezionare " Fill " e scegliere " Bianca" dalle opzioni .
3

Fare clic su " Aggiungi uno stile di livello " pulsante ( F ) lungo la parte inferiore del palette Livelli e selezionare " Bagliore esterno ". Fare doppio clic su " Imposta colore di Glow " campo nella finestra che si apre ed entra 333333 . Impostare il " Opacity " al 100 per cento e "Spread " e "Dimensione" a 5. "Noise" e " jitter " deve essere impostato a 0 e " Gamma " a 50 , le impostazioni predefinite per tutti e tre. Fare clic su " OK ". L' effetto ombra - tipo dovrebbe comparire attorno al rettangolo , anche se appare meno pronunciata di come apparirà sulla tua pagina web .
4

tuo strumento " Ritaglia" per 840 pixel per la larghezza e 2 pixel per la profondità . Trascinare lo strumento " Ritaglia ", da un lato dello spazio di lavoro all'altro , il taglio di un cuneo di 2 pixel in profondità in tutto il centro del rettangolo . Fare doppio clic sulla funzione " Crop" nella barra degli strumenti per confermare la coltura ( visto che hai un posto dove fare doppio clic sull'immagine sottile) . Una piccola quantità di luce mostrerà su entrambi i lati della vostra immagine ritagliata all'interno dei 20 pixel di un'area trasparente che hai lasciato su ogni lato . Salvare il file come " wrapper.png " in formato PNG nella stessa cartella come pagina web.
5

Aprire il documento HTML e creare un div involucro con l' ID di "wrapper" che è 840 pixel di larghezza e centrato nella pagina . Creare un div con l' ID di "contenuto " che si trova all'interno del div involucro con una larghezza di 840 pixel e aggiungere il wrapper.png a questo livello come immagine di sfondo ripetuta sull'asse y , o in verticale . Aggiungere un div con l' ID di " leftSideBar " con un certo contenuto di dare profondità al div dei contenuti , che si estende lo sfondo bianco in modo da poter vedere l'effetto dell'ombra . La codifica per la pagina HTML aspetto: