Schöne Schatten (Anatomie der JQuery-Homepage)

Das erste, was Sie auf der jquery-Homepage sehen, ist dieser Glasschlackeneffekt. Der Designer verwendet Lichter und Schatten, um diesen Effekt zu erzeugen.

Wie schafft man dieses Gefühl?

Schritt eins: Stellen Sie den Navigationsbereich auf durchscheinend und die Farbe auf rgba(0,0,0，.1)

Schritt 2: Schneiden Sie die obere linke und obere rechte Ecke in abgerundete Ecken (nicht wichtig)

Schritt 3: Markieren Sie den oberen Teil des Navigationsbereichsborder-top: 1px solid rgba(255,255,255,.3)

Schritt 3: Schattieren Sie die vier Seiten des Navigationsbereichsbox-shadow:0 0 5px rgba(0,0,0,.7)

Teil 4: Schatteneffekt zum linken Navigationsbereich hinzufügenborder-left: 1px solid rgba(0,0,0,.3)

An gutem Singen kann man sich nicht satt sehen. Es gibt an vielen Stellen auf der jquery-Homepage ähnliche Techniken. Wenn Sie mir nicht glauben, lesen Sie bitte unten:

Unsichtbar. . . . Nun, ich habe mir eine Lupe gekauft, um es zu sehen, und der Effekt ähnelt dem: Ich habe mit einem Messer eine Linie auf den grauen Felsen gezeichnet, wie ... wie die Worte, die in ein antikes Denkmal eingraviert sind. Die Einstellungen sind sehr einfach. Wählen Sie die Farbe des Glanzlichts und des Schattens entsprechend der Farbe des Hintergrunds aus. Beginnen Sie mit dem Festlegen des Schattens: box-shadow: 0 -1px #000border-top: 1px solid #333