Eines der großen Mysterien in Web-Design ist wie ein Schatten-Effekt hinter dem Hauptinhalt , die oft weißen oder hellen und bezeichnet als Wrapper zu bekommen. Erstellen der richtigen Bild in einem Bildbearbeitungsprogramm wie Photoshop , ist die halbe Miete . Verwenden Sie das Bild als Hintergrund wiederholen in eine HTML- div-Tag ist die andere Hälfte . Das Bild tatsächlich sitzt in seinem eigenen div innerhalb der "Wrapper " div auf der Seite. Anleitung
1
Erstellen eines neuen Dokuments in Photoshop , die 840 Pixel breit ist um 1.000 Pixel tief. Doppelklicken Sie auf die Hintergrund-Ebene in der Ebenen-Palette , damit es eine bearbeitbare Schicht . Der Arbeitsbereich sollte eine Schachbrett Hintergrund , was Transparenz .
2
Erstellen Sie ein Rechteck auf der Bühne mit dem " Marquis Rechteck" -Werkzeug ( gepunktetes Rechteck ) in der linken Symbolleiste . Nicht über die Größe, die Sie ziehen zu kümmern. Über den Kasten der rechten Maustaste und wählen Sie " Auswahl transformieren . " Klicken Sie auf die linke obere Box in der " Reference Point Location "-Anzeige in der Symbolleiste am oberen Rand des Arbeitsbereichs. Es sieht aus wie ein Tic Tac Toe Bord von Arten. Diese orientiert Ihr x , y-Koordinaten an die Spitze des Arbeitsbereichs links . In der Referenz Formularfelder auf der rechten Seite der Anzeige , stellen Sie Ihren x 20 Pixel und Ihre Breite auf 800 Pixel koordinieren. Dies zentriert das Rechteck in Ihrem Arbeitsbereich und hinterlässt 20 Pixel auf jeder Seite für den Schatten . Auf das Rechteck , um zurück zu Ihrem Marquis Rechteck Doppelklick . Über sie mit der rechten Maustaste klicken , wählen Sie " Füllen " und wählen Sie " Weiß " aus Ihre Möglichkeiten.
3
Klicken Sie auf die Schaltfläche "Hinzufügen einer Layer- Style" -Taste (die F ) entlang der Unterseite des Ebenen-Palette und wählen Sie " Schein nach außen . " Doppelklicken Sie auf den "Set Color of Glow "-Feld in dem Fenster , das sich öffnet geben 333333 . Stellen Sie Ihre " Deckkraft " auf 100 Prozent und "Spread " und " Größe " bis 5 . "Noise " und " Jitter" sollte auf 0 gesetzt werden und "Range" bis 50, die Standardeinstellungen für alle drei. Klicken Sie auf " OK". Der Schatten - Art -Effekt sollte zeigen, bis um das Rechteck , wenn es erscheinen wird, weniger stark ausgeprägt als , wie es auf der Web -Seite.
4
Stellen Sie Ihre "Crop" -Tool bis 840 Pixel für die Breite und 2 Pixel für die Tiefe . Ziehen Sie den "Crop" -Tool von einer Seite des Arbeitsbereichs auf die andere , schneiden einen Keil 2 Pixel tief in der Mitte des Rechtecks . Doppelklicken Sie auf den "Crop "-Werkzeug in der Werkzeugleiste, um die Ernte zu bestätigen (da Sie kein Ort, um auf dem dünnen Bild doppelklicken haben ) . Eine kleine Menge der Glut wird auf beiden Seiten des beschnittenen Bildes innerhalb der 20 Pixel von transparenten Bereich, den Sie auf jeder Seite links zeigen . Speichern Sie die Datei als " wrapper.png " im PNG-Format in den gleichen Ordner wie Ihre Web -Seite.
5
Öffnen Sie Ihre HTML-Dokument , und erstellen einen Wrapper div mit der ID "Wrapper ", das heißt 840 Pixel breit und zentriert auf der Seite. Erstellen Sie ein div mit der ID "content" , die innerhalb der Wrapper div sitzt mit einer Breite von 840 Pixel und fügen Sie Ihre wrapper.png auf diese Schicht als eine sich wiederholende Hintergrundbild auf der y-Achse , oder vertikal . Fügen Sie einen div mit der ID " leftSideBar " mit einigen Inhalten in die Tiefe , um Ihre Inhalte div geben , Dehnen der weißen Hintergrund , so dass Sie die Wirkung der Schatten sehen kann. Die Codierung für die HTML-Seite sieht wie folgt aus :
