En av de stora mysterierna i webbdesign är hur man får en effekt skugga bakom huvudinnehållet området , vilket ofta är vitt eller ljust färgat och kallad wrapper . Skapa den rätta bilden i ett bildredigeringsprogram , t.ex. Photoshop , är halva slaget . Använda bilden som ett upprepande bakgrund i en HTML div-taggen är den andra halvan . Bilden sitter faktiskt inne sin egen div innanför " wrapper " div på sidan . Instruktioner
1
Skapa ett nytt dokument i Photoshop som är 840 pixlar bred och 1000 pixlar djup . Dubbelklicka på bakgrundslagret i paletten Lager för att göra det till en redigerbar skikt . Arbetsytan ska ha ett schackbräde bakgrund , visar öppenhet .
2
Skapa en rektangel på scenen med hjälp av " Marquis Rektangel " verktyg ( streckad rektangel ) i det vänstra verktygsfältet . Oroa dig inte om storleken du ritar . Högerklicka över rutan och välj " Transform Selection . " Klicka på den övre vänstra rutan i " Reference Point Location " indikatorn i verktygsfältet längst upp i arbetsytan . Det ser ut som en Tic Tac Toe styrelse sorterar . Detta orienterar ditt x , y koordinater till upp till vänster på arbetsytan . Inom de områden referens formuläret till höger om indikatorn , ställ dina x -koordinat till 20 pixlar och din bredd till 800 pixlar . Detta centrerar rektangeln i din arbetsyta och lämnar 20 pixlar på varje sida för skuggan . Dubbelklicka på rektangeln för att gå tillbaka till din markis rektangel . Högerklicka över den, välj " Fyll " och välj "White " från dina alternativ .
3
Klicka på " Lägg till en Layer Style " -knappen ( F ) längs botten paletten Lager och välj " Ytterglöd . " Dubbelklicka på " Set Color of Glow " fältet i fönstret som öppnas och ange 333333 . Ställ din " Opacitet " till 100 procent och " Spread " och " Storlek " till 5 . " Buller " och " jitter " bör sättas till 0 och " Range " till 50 , standardinställningarna för alla tre . Klicka på " OK . " Skuggan - typ effekt bör dyka upp runt rektangeln , även om det kommer att synas mindre uttalad än hur det kommer att se ut på din webbsida .
4
Ställ din " Crop " verktyget till 840 pixlar för bredden och 2 pixlar för djupet . Dra ditt " Crop " verktyget från den ena sidan av arbetsytan till andra , skära en kil 2 pixlar djupt över mitten av din rektangel . Dubbelklicka på " Crop " i verktygsfältet för att bekräfta den gröda ( eftersom du inte har någon plats att dubbelklicka på den tunna bilden ) . En liten mängd av glöden kommer att visa på endera sidan av din beskurna bilden innanför 20 pixlar av transparent område du kvar på varje sida . Spara filen som " wrapper.png " i PNG- format till samma mapp som din webbsida .
5
Öppna din HTML- dokument och skapa en wrapper div med id " wrapper " som är 840 pixlar bred och centrerad i sidan . Skapa en div med ID " content " som sitter på insidan av omslaget div med en bredd på 840 pixlar och lägg din wrapper.png till detta skikt som en upprepande bakgrundsbild på y-axeln , eller vertikalt . Lägg en div med id " leftSideBar " med innehåll för att ge djup till ditt innehåll div , sträcker den vita bakgrunden så att du kan se effekten av skuggan . Koder för HTML-sidan ser ut så här :
