En af de store mysterier i web-design er , hvordan man får en slagskygge effekt bag hovedindholdet område, som ofte er hvid eller lys farvet og benævnt wrapper. Oprettelse korrekt billede i et billedredigeringsprogram , som Photoshop , er halvt fuldendt . Brug af billedet som en gentaget baggrund i en HTML div tag er den anden halvdel . Billedet sidder faktisk inde i sin egen div inde i " wrapper " div på siden. Instruktioner
1

Opret et nyt dokument i Photoshop, der er 840 pixels bredt med 1.000 pixels dyb. Dobbeltklik på baggrundslaget på lagpaletten for at gøre det til en redigerbar lag. Arbejdsområdet skal have et skakternet baggrund , hvilket indikerer åbenhed.
2

Opret et rektangel på scenen ved hjælp af " Marquis Rektangel " værktøj (punkteret rektangel) i venstre værktøjslinje. Må ikke bekymre dig om den størrelse, du tegner. Højreklik på feltet og vælg " Transform Selection ". Klik på den øverste venstre boks i "referencepunkt Location" indikatoren i værktøjslinjen øverst i arbejdsområdet. Det ligner en Tic Tac Toe bord slags. Dette orienterer din x , y-koordinater til øverste venstre hjørne af arbejdsområdet. I reference formularfelter til højre for indikatoren , sæt dine x koordinerer til 20 pixels , og din bredde til 800 pixels. Dette centrerer rektangel på dit arbejdsområde og efterlader 20 pixels på hver side til skyggen. Dobbelt-klik på dit rektangel til at gå tilbage til din marquis rektangel. Højreklik på den, skal du vælge " Fyld " og vælg "White " fra dine muligheder.
3

Klik på " Tilføj en Layer Style" knappen ( F ) langs bunden af lag paletten og vælg " Outer Glow ". Dobbeltklik på "Set Color of Glow " feltet i det vindue, der åbnes, og indtast 333333 . Indstil din " Opacity " til 100 procent og " Spread " og " Size" til 5. . " Noise " og " Jitter " bør sættes til 0 og " Range " til 50, standardindstillingerne for alle tre. Klik på "OK". Skyggen -typen effekt skulle vise sig rundt om rektanglet , selvom det vil virke mindre udtalt end hvordan det vil se ud på din webside.
4

Indstil din " Crop " værktøj til 840 pixels for bredden og 2 pixels for dybden . Træk din " Crop " værktøj fra den ene side af arbejdsområdet til den anden , skære en kile 2 pixels dybt over midten af ​​dit rektangel. Dobbeltklik på " Crop" i værktøjslinjen for at bekræfte afgrøde ( siden du har noget sted at dobbeltklikke på den tynde billede). En lille mængde af den glød vil vise på hver side af dit beskårne billede inde i 20 pixels transparent område, du tilbage på hver side. Gem din fil som " wrapper.png " i PNG -format til den samme mappe som din webside .
5.

Åbn dit HTML-dokument og oprette en wrapper div med id " wrapper ", der er 840 pixels bredt og centreret på siden. Opret en div med id af "indhold" , der sidder inde i wrapper div med en bredde på 840 pixels og tilføje dit wrapper.png til dette lag som en gentaget baggrundsbillede på y-aksen , eller lodret. Tilføj en div med id " leftSideBar " med noget indhold for at give dybde til dit indhold div , strække den hvide baggrund , så du kan se effekten af skyggen . Kodning af HTML-siden ser sådan ud: