Implementation of the pure CSS3 stereo prompt module with source code

I have been reading JS books and writing games recently. I haven't written CSS for a long time. I saw an example of a pure CSS3 progress bar yesterday. I feel very creative, especially the use of background-size for the repeat gradient diagonal line is amazing. Today, when haofang clicks dota again, he does not enter the room. A prompt box is displayed, as shown below:

I found that it had something in common with the progress bar, so I wrote this module for reference and made some slight modifications, as shown below:

I only wrote moz code and didn't write webkit. I can add the code myself. Below I will analyze the main points of this module:

　　1. Structure

The entire module is a tipsBox, and then the left-side title of hd and the content of bd are displayed. Each title uses tipsTitle to write the basic style, which is green by default, then, multiple background titles are covered by blue and yellow multi-class name weights.

　　2. Discount

There is a paper-like fold in the upper right corner to increase the stereoscopic effect of the module. If you read my code, you will find that there are no redundant hooks, because I used the tipsBox pseudo class before \ after. After setting the basic width and height, we mainly set the color. The code for setting the before color is as follows:

-Moz-linear-gradient (-135deg, # e6f2fe 50%, # fff 50% );

Do you understand? It is a oblique linear gradient, but there is no transition, but there is another obvious demarcation between 50% and 0%. 50%-50% is the same as the background color, 100%-is white, so there is an illusion: A triangle is missing in the upper right corner of tipsBox. Then, set the after z-index to be lower than before for projection, but the size of after is slightly smaller than before, because the width and height will increase if the projection is done, in this way, the background color area in the upper-right corner of before will be crossed. No one specifies that the projection cannot be smaller than its own size, so adjust it and then rotate it slightly. In this way, there will be a fold, it won't help.

　　3. Title items

Title Project tipsTitle controls the basic style, some of which are basically wide and high positioning, so don't mention it. Pull a linear gradient from left to right from the shortest to the deep, generally, the light source looks pleasing to the eye on the left. I mainly talk about the role of the pseudo class. I use "after" to make the smooth surface with radians on the left, and "before" to make the bottom corner of the left.

After using-moz-transform: skew (0deg,-20deg); To achieve vertical oblique cutting, before sets the bottom-left corner to the rounded corner, and the adjusting position is a corner, because oblique cutting is a straight line, but the amplitude is small, so it is not easy to find, and then set the after color to the linear gradient from left to right from the light to the deep, before is a pure dark color, while border is connected to the main body, in this way, the basic effect will come out.

　　4. Highlight shadow

After the basic elements of the title item are implemented, the highlights, shadows, and diagonal lines of "no change" will be started. This will not change, meaning it will not change, and it will not be changed... in fact, there is no need to change, that is, when you change the background color of the title item, this one does not need to be changed. I will extract it and use it for implementation. I prefer to use tags for hooks, you can also replace it with other labels. The highlight subject pulls a linear gradient from top to bottom transparent to 0.2 opaque. The Code is as follows:

-Moz-linear-gradient (top, rgba (255,255,255, 0), rgba (255,255,255, 0.2 ));

Highlight: before is used to draw white diagonal lines. The low-key point is to imitate the progress bar, And the vulgar point is to copy the article... this diagonal line is placed on highlight instead of tipsTitle. In fact, there is another point: if highlight can overwrite tipsTitle + tipsTitle: after or tipsTitle, there will be no diagonal lines at the left, in this way, we feel that the two pieces are not consecutive.

Highlight: after is used to draw a black image on the lower left side, and pull a horizontal gradient from black to transparent from left to right. In this way, the background color can be used, and the entire highlight is composed of black and white transparent and colorless lines, therefore, changing the background color will not be affected.

　　5. Hollow out

After the basic effect is displayed, I feel that the title is a little abrupt, so I still add a hollow-out effect. The original hd is not used, so don't waste it, adjust and use box-shadow inset to implement inset projection and pull a little to the left. It seems that the title item is displayed in front of the hollow through the back, which makes it more comfortable.

　　6. Others

Nothing else can be seen, but some miscellaneous are added. For example, the text uses a white background color, a black transparent projection, and the center is aligned. The entire text box has a dotted line outer frame, however, we cannot add box-shadow projection to tipsBox to enhance the stereoscopic effect, because the upper right corner will help. If the shadow is translated in the lower left corner, it feels strange, so we simply don't need to add it, or you can try it to see if it will be better.

Source code download: http://www.bkjia.com/down/html/44284.html

Source: http://blog.sina.com.cn/s/blog_74d6cedd0100yw4h.html