Uno de los grandes misterios en el diseño web es cómo conseguir un efecto de sombra detrás del área de contenido principal , que suele ser blanco o de color claro y conocido como el envoltorio . Creación de la imagen adecuada en un editor de imágenes , como Photoshop, es la mitad de la batalla. Usando la imagen como fondo de repetición en una etiqueta HTML div es la otra mitad . La imagen en realidad se encuentra dentro de su propia div dentro del div "contenedor" en la página. Instrucciones
1

Crear un nuevo documento en Photoshop que es de 840 píxeles de ancho por 1000 píxeles de profundidad. Haga doble clic en la capa de fondo en la paleta Capas para una capa editable. El espacio de trabajo debe tener un fondo de tablero de ajedrez , lo que indica la transparencia.
2

Crear un rectángulo en el escenario con la herramienta "Rectángulo Marquis " ( rectángulo de puntos ) en la barra de la izquierda . No te preocupes por el tamaño que usted dibuja. Haga clic sobre la casilla y seleccione " Transformar selección. " Haga clic en el cuadro superior izquierdo en el " Lugar del punto de referencia " en el indicador de la barra de herramientas en la parte superior del espacio de trabajo . Se parece a un Tic Tac Toe placa de tipo. Esto orienta la coordenadas x, y de la parte superior izquierda del área de trabajo . En los campos del formulario de referencia a la derecha del indicador , defina sus coordenadas x 20 píxeles y el ancho de 800 píxeles. Esto centra el rectángulo en el espacio de trabajo y deja a 20 píxeles en cada lado de la sombra . Haga doble clic en el rectángulo para volver a su rectángulo marqués. Haga clic derecho sobre él, seleccione " Fill" y selecciona "White " de sus opciones.
3

clic en "Añadir un estilo de capa " botón (el F) a lo largo de la parte inferior de la paleta de capas y seleccione " resplandor exterior ". Haga doble clic en el " Grupo de colores de resplandor " campo en la ventana que se abre y entra 333333 . Establezca su " opacidad" al 100 por ciento y " Spread " y "Tamaño " a 5 . " Noise" y " jitter " se debe establecer en 0 y " Range" a 50, los valores por defecto para los tres. Haga clic en " Aceptar". El efecto del tipo de sombra debe aparecer alrededor del rectángulo , aunque aparecerá menos pronunciada que la forma en que se verá en su página web.
4

Configurar la herramienta "Recortar" a 840 píxeles para el ancho y 2 píxeles para la profundidad . Arrastre la herramienta "Recortar " de un lado del espacio de trabajo a otro , cortando una cuña de 2 píxeles de profundidad en el centro de su rectángulo. Haga doble clic en la herramienta "Recortar" en la barra de herramientas para confirmar el cultivo ( ya que no tienen lugar para hacer doble clic en la imagen delgada ) . Una pequeña cantidad de la luz se mostrará en cada lado de la imagen recortada dentro de los 20 píxeles de área transparente que dejaste de lado. Guarde el archivo como " wrapper.png " en el formato PNG en la misma carpeta que la página Web.
5

Abra el documento HTML y crear un div contenedor con el ID de "contenedor" que es 840 píxeles de ancho y centrado en la página . Crear un div con el ID de "contenido " que se encuentra dentro del div contenedor con un ancho de 840 píxeles y añadir su wrapper.png a esta capa como imagen de fondo se repite en el eje y , o verticalmente. Añadir un div con el ID de " leftSideBar " con un cierto contenido para dar profundidad a su div contenido, estirando el fondo blanco para que pueda ver el efecto de la sombra. La codificación de la página HTML se parece a esto: