Um dos grandes mistérios em web design é como obter um efeito de sombra por trás da área de conteúdo principal , que muitas vezes é branco ou de cor clara e referido como o wrapper. Criar a imagem adequada em um editor de imagens , como o Photoshop, é metade da batalha . Usando a imagem como um fundo de repetição em uma tag div HTML é a outra metade . A imagem , na verdade, fica dentro de seu próprio div dentro da div "wrapper" na página. Instruções
1

Crie um novo documento no Photoshop , que é de 840 pixels de largura por 1000 pixels de profundidade. Clique duas vezes na camada de fundo na paleta Layers para torná-lo uma camada editável. A área de trabalho deve ter um fundo quadriculado , indicando transparência.
2

Crie um retângulo no palco usando a função " Marquês Retângulo " ( retângulo pontilhado ) na barra de ferramentas à esquerda . Não se preocupe com o tamanho que você desenhar. Botão direito do mouse sobre a caixa e selecione " Transform Selection ". Clique na caixa superior esquerdo no indicador de " Ponto de Referência Location" na barra de ferramentas na parte superior da área de trabalho . Parece que uma placa de Tic Tac Toe das sortes. Esta orienta sua coordenadas x, y para o canto superior esquerdo da área de trabalho. Nos campos do formulário de referência à direita do indicador, definir as suas coordenada x 20 pixels e sua largura de 800 pixels. Isso centraliza o retângulo em seu espaço de trabalho e deixa 20 pixels de cada lado para a sombra . Dê um duplo clique no seu retângulo para voltar para o seu retângulo marquês . Botão direito do mouse sobre ele , selecione " Fill" e escolha a opção " Branco " de suas opções .
3

Clique no botão "Adicionar um Estilo de Camada " (o F) ao longo da parte inferior da paleta Camadas e selecione " Outer Glow ". Clique duas vezes no campo " Definir cor do Glow" na janela que se abre e entra 333333 . Defina o seu " opacidade" a 100 por cento e "Spread " e " Size" para 5 . "Noise " e " Jitter " deve ser definido como 0 e "Range " para 50, os padrões para todos os três. Clique em " OK". O efeito do tipo de sombra deve mostrar-se à volta do rectângulo , embora ele aparecerá menos pronunciada do que como vai ficar na sua página web .
4

Ajuste sua ferramenta "Crop " para 840 pixels para a largura e 2 pixels para a profundidade . Arraste a ferramenta "Crop " de um lado do espaço de trabalho para o outro , cortando uma cunha 2 pixels profunda em todo o meio do seu retângulo. Dê um duplo clique na ferramenta "Crop " na barra de ferramentas para confirmar a colheita (desde que você não tem nenhum lugar para clicar duas vezes sobre a imagem fina). Uma pequena quantidade de brilho irá mostrar em cada lado da sua imagem recortada dentro dos 20 pixels de área transparente que você deixou de cada lado. Salve o arquivo como " wrapper.png " no formato PNG para a mesma pasta como a página Web .
5

Abra o documento HTML e criar uma div wrapper com o ID de "wrapper" que é 840 pixels de largura e centrado na página. Criar um div com o ID de "conteúdo" que fica dentro da div invólucro com uma largura de 840 pixels e adicionar seu wrapper.png a esta camada como uma imagem de fundo de repetição no eixo y, ou verticalmente. Adicionar um div com o ID de " leftSideBar " com algum conteúdo para dar profundidade a sua div conteúdo, esticar o fundo branco para que você possa ver o efeito da sombra. A codificação para a página HTML se parece com isso :