Een van de grote mysteries in web design is hoe je een slagschaduw effect achter de belangrijkste content gebied , die vaak wit of licht gekleurd en aangeduid als de wrapper te krijgen. Het creëren van de juiste afbeelding in een beeldbewerkingsprogramma zoals Photoshop , is het halve werk . Het gebruik van de afbeelding als een herhalende achtergrond in een HTML- div-tag is de andere helft . Het beeld eigenlijk zit binnen zijn eigen div binnen de " wrapper " div op de pagina . Instructies
1 Maak een nieuw document in Photoshop , dat is 840 pixels breed en 1000 pixels diep . Dubbelklik op de achtergrond laag in het palet Lagen om het een bewerkbare laag te maken . De werkruimte moet een dambord achtergrond , met vermelding van transparantie . Kopen van 2 Maak een rechthoek op het podium met behulp van de functie " Markies rechthoek " ( gestippelde rechthoek ) in de linker werkbalk . Maak je geen zorgen over de grootte u tekent . Klik met de rechtermuisknop op het vak en selecteer " Transformatie selectie . " Klik op de linker box aan de " Reference Point Location " indicator in de werkbalk aan de bovenkant van de werkruimte . Het ziet eruit als een Tic Tac Toe boord van soorten. Dit oriënteert je x , y-coördinaten van de linkerbovenhoek van de werkruimte . In de verwijzing formuliervelden aan de rechterkant van de indicator , stel je je x-coördinaat naar 20 pixels en een breedte van 800 pixels . Dit centreert de rechthoek in uw werkruimte en laat 20 pixels aan elke kant van de schaduw . Dubbelklik op de rechthoek om terug te gaan naar uw markies rechthoek . Klik met de rechtermuisknop op het, selecteer "Fill " en kies " White " van uw mogelijkheden .
3 Klik op de " Voeg een Layer Style" -knop ( de F ) langs de onderkant van de lagen palet en selecteer " Gloed buiten . " Dubbelklik op de "Set Kleur van Glow " veld in het venster dat verschijnt en voer 333333 . Stel je " Opacity " tot 100 procent en " Spread " en " Size " naar 5 . " Noise " en " Jitter " moet worden ingesteld op 0 en " Range " op 50 , de standaard voor alle drie . Klik op " OK . " De schaduw - effect type te zien zijn rond de rechthoek , al is het minder uitgesproken dan hoe het eruit zal zien op uw webpagina verschijnt .
4 Stel uw functie " Crop " tot 840 pixels voor de breedte en 2 pixels voor de diepte . Sleep uw functie " Crop" van de ene kant van de werkruimte naar de andere , het snijden van een wig 2 pixels diep over het midden van je rechthoek . Dubbelklik op de functie " Crop " in de werkbalk om het gewas te bevestigen ( omdat je geen plek om te dubbelklikken op het dunne afbeelding ) . Een kleine hoeveelheid van de gloed zal laten zien aan weerszijden van uw bijgesneden afbeelding binnen de 20 pixels van transparante gebied dat u links op elke kant . Sla je bestand op als " wrapper.png " in het PNG-formaat naar dezelfde map als uw webpagina .
5 Open je HTML-document en maak een wrapper div met de ID van de " wrapper " dat is 840 pixels breed en in het midden van de pagina . Maak een div met de ID van de "content " , dat zit in de wrapper div met een breedte van 840 pixels en voeg uw wrapper.png om deze laag als een afbeelding herhalende achtergrond op de y -as , of verticaal . Voeg een div met de id van " leftSideBar " met een bepaalde inhoud om diepte te geven aan je content div , het uitrekken van de witte achtergrond, zodat u het effect van de schaduw kan zien . De codering voor de HTML- pagina ziet er als volgt uit:
| 