Beautiful shadows (anatomy of jquery home page)

jquery

• Download
• API Documentation
• Blog
• Plugins
• Browser Support

The first thing you see on the jquery homepage is this glass slag effect. The designer uses highlights and shadows to create this effect.

How to make this feeling?

Step one: Set the navigation area to translucent and color to rgba(0,0,0,.1)

Step 2: Cut out rounded corners in the upper left corner and upper right corner (not important)

Step 3: Highlight the upper part of the navigation areaborder-top: 1px solid rgba(255,255,255,.3)

Step 3: Shadow the four sides of the navigation areabox-shadow:0 0 5px rgba(0,0,0,.7)

Part 4: Add shadow effect to the left navigation areaborder-left: 1px solid rgba(0,0,0,.3)

You can never tire of good singing. There are similar techniques in many places on the jquery homepage. If you don’t believe me, please read below:

okokokokkokoko

Invisible. . . . Well, I bought a magnifying glass to see it, and the effect looks similar to: I used a knife to draw a line on the gray rock, like... like the words engraved on an ancient monument. The settings are very simple. Select the color of the highlight and shadow according to the color of the background; after the color is determined, start setting the shadow: box-shadow: 0 -1px #000; set the highlight: border-top: 1px solid #333

Well, that’s all I’ve written, I’ll continue to add more later---------------------------the world ain’t all sunshine and rainbows