En av de store mysterier i webdesign er hvordan du får en skygge effekt bak hovedinnholdet området, som ofte er hvit eller lys farge og referert til som wrapper. Skape den riktige bildet i et bilderedigeringsprogram , for eksempel Photoshop , er halve kampen . Bruke bildet som en gjentakende bakgrunn i en HTML div tag er den andre halvparten . Bildet sitter faktisk inne sin egen div inne i " wrapper" div på siden . Instruksjoner
en

Opprett et nytt dokument i Photoshop som er 840 piksler bred og 1000 piksler dyp. Dobbeltklikk på bakgrunnslaget i lagpaletten for å gjøre det til et redigerbart lag . Arbeidsområdet skal ha et sjakkbrett bakgrunn , noe som indikerer åpenhet.
2

Lag et rektangel på scenen ved hjelp av " Marquis rektangel "-verktøyet ( stiplet rektangel ) i venstre verktøylinjen. Ikke bekymre seg om størrelsen du tegner. Høyreklikk over boksen og velg " Transform Selection . " Klikk øverst til venstre boksen i "Reference Point Location" indikator på verktøylinjen øverst i arbeidsområdet. Det ser ut som en Tic Tac Toe bord slags. Dette orienterer din x , Y koordinater til øverst til venstre i arbeidsområdet . I referanse feltene til høyre for indikatoren , angi x koordinere til 20 piksler og en bredde på 800 piksler. Dette sentrerer rektangelet i arbeidsområdet og etterlater 20 piksler på hver side for skyggen . Dobbeltklikk på firkanten for å gå tilbake til Marquis rektangel . Høyreklikk over den, velg " Fill" og velg " White" fra alternativene.
3

Klikk på " Legg til en Layer Style"- knappen ( F ) langs bunnen av lagpaletten og velg " Outer Glow ". Dobbeltklikk på "Set Color of Glow "-feltet i vinduet som åpner og inn 333333 . Still inn " Opacity " til 100 prosent og " Spread " og " Size" til 5 . "Noise" og " Jitter " bør settes til 0 og " Range " til 50 , standardinnstillingene for alle tre. Klikk "OK". Skyggen -type effekt skulle dukke opp rundt rektangel , men det vises mindre markert enn hvordan det vil se ut på nettsiden din.
4

Sett "Crop "-verktøyet til 840 piksler for bredden og to piksler for dybden . Dra "Crop "-verktøyet fra en side av arbeidsområdet til den andre , kutte en kile to piksler dypt over midten av rektangelet ditt . Dobbeltklikk på "Beskjær "-verktøyet på verktøylinjen for å bekrefte avling ( siden du har ingen sted å dobbeltklikke på den tynne bildet ) . En liten mengde av gløden vil vise på hver side av din beskåret bilde inne i de 20 piksler av gjennomsiktig område du igjen på hver side. Lagre filen som " wrapper.png " i PNG -format til samme mappe som websiden.
5

Åpne HTML-dokument og lage en wrapper div med ID "wrapper " som er 840 piksler bredt og sentrert i side . Lag en div med ID "innhold" som sitter inne i wrapper div med en bredde på 840 piksler og legge til wrapper.png til dette laget som en gjentatt bakgrunnsbilde på y-aksen , eller vertikalt . Legg til en div med ID " leftSideBar " med noe innhold å gi dybde til innholdet div , strekker den hvite bakgrunnen , slik at du kan se effekten av skyggen . Koding for HTML-siden ser slik ut : en