How to Create layer shadow of Google wave (css + image)

I received an invitation from google wave a few days ago. To tell the truth, I am not interested in this thing. I don't have time to study what he actually does. But as a front-end, I should pay attention to these things, so I looked at this stuff and saw the first good experience of chewing. I immediately got curious about the magic of this shadow. Why did it come out? I went to the Internet to search for it, I didn't find any shadow article (except the rough shadow), so I used ff to rip down all the pictures involved, and I used these pictures to build this style as soon as possible, maybe my method is different from google, but the effect is indeed:



To view the source code and the actual effect, click here: (use firfox or chrome to open this link, and ie is not supported)

Http://www.coderbbs.cn/UED/google-wave-test.html

Note that this style is not supported in ie. I think this is why google wave needs to install a chrome frame for ie, the reminder page displayed in ie also has this shadow style, but it is a fixed layer with only one background image, which cannot change the layer size, the reason is that if the width of the layer is not set in ie, only left and right are set, and the layer does not extend itself, this effect cannot be achieved. you can experiment on your own.

The principles are as follows:

The following images are used in the wave to implement shadow and rounded corners (several small images used to modify bugs are omitted, without affecting the effect)


Each of them is used in: 1-The title background; 2-the right of the title; 3-The content body by border; 4-the left of the title; 5-the bottom right corner; 6-the bottom border of the content body; 7-rounded corner in the lower left corner; 8-left border of the content body

First, we need to construct an html structure. The external container is a general container, which includes the modifier layer, the title layer, and the content layer:

Html code, only oneCopy to ClipboardReference: [www.bkjia.com] 1 <div class = "container con-1">
2 <div class = "w-top-left corner"> </div>
3 <div class = "w-top-right corner"> </div>
4 <div class = "w-bot-left corner"> </div>
5 <div class = "w-bot-right corner"> </div>
6 <div class = "w-B-left corner"> </div>
7 <div class = "w-B-right corner"> </div>
8 <div class = "w-B corner"> </div>
9 <div class = "w-hd"> title </div>
10 <div class = "w-bd"> content </div>
26 </div>

Next we want to distribute the positions of each image:

This is easy to see. First, set each modifier layer in css to absolute positioning, including the title and content layer, so that they can locate the iner relative to the outermost layer, the position attribute must be set for the outer layer. If not set, the position attribute cannot be correctly displayed.

Set the size of each layer to the same as that of the image and set the background image. There is no difficulty in setting the background image. Then you can locate it. In fact, I am stuck here for a while, the effect is always unsatisfactory. Originally, I didn't plan to set the content to a separate layer. Later I found that the content must be separated from the outer packaging layer, as long as the location is located, that's all.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page