Pure CSS3 transparent Crystal box

I believe members have seen this example: 3D box, in the book "CSS3 Combat" on the No. 282 page has a comprehensive combat "design dynamic three-dimensional box" example, to achieve the same as it, my box is also based on its prototype design, but in the implementation of the modification, optimization, and add some details, Here is my box Firefox screenshot:

1. Transparent box, strong permeability, because the transparent, so the back of the three face will be done, so a total of 6, more than the original 3;
2. Projection mirror, so that the three-dimensional sense of the box more strongly;
3. The processing of the corner line, make the box surface and the surface between the transition harmonious.

You can click here to download the source code (just write the effect under Moz, WebKit is not written)

The HTML structure of the box is simple, as follows:

1 2 3 4 5 6 7 8

<div> <div> pre </div> <div> after </div> <div> left </div> <div> right </div> <div> on </div> <div> next </div> </div>

A big box to wrap "before, after, left, right, up, down" 6 faces, because the position produces layer high relationship, so its order is actually "after, down, left, front, top, right", the following div will naturally stack on top, can not write Z-index.

I. Positioning of the framework

Initialize the box face, the top width, positioning, background color and other attributes, and then the transformation of the origin set in the upper-right corner.

Box face one by one, first from the simple start, before and after the difficulty coefficient is the same, a diagonal cut skew effect can be achieved, and then is again separate positioning: "Before and after" with skew (0deg,20deg); Y-axis forward oblique cut, "left, right" with skew (0deg,-20deg); The y-axis is negatively chamfered, and then the alignment is positioned, and the basic box is out.

Then is the chicken "up, below", it needs to rotate after the oblique cut to complete, so the difficulty coefficient is also rising, here I said, "after rotation oblique", rather than "oblique cut after rotation", there is a difference, my writing is as follows:

-moz-transform:rotate ( -40deg) skew (30deg,20deg);

If you write this:

-moz-transform:skew (30deg,20deg) rotate ( -40deg);

That is not the same as the expected effect, the determined skew effect will be distorted by the rotation behind.

I do not know if you have personally done that box, I was doing when I found that the top of the "box lid" than the side of the "box wall" nested a layer of Div, used to separate transform transformation effect, I tried to use only a div to achieve, the results prove that As long as the first write rotate and then skew can maintain skew skew effect, so that the HTML structure and CSS code is a lot simpler.

Two, border line

If you read the code, no dizziness, there is no such a doubt, why not border to write a border line?

If you use border to write, the width of the border will overlap, resulting in the box occupied by the 200+1+1=202px, very disgusting numbers, and border also do not stick to the border, as shown:

So in such a way to achieve the border effect: Box-shadow/text-shadow;

In general, we are using border to give Yuan sketch edge, a few days before the forum, see such a practice: to the text strokes .

General thinking will think of Text-shadow this attribute, but it is a projection, with the stroke or a difference, Text-shadow written as follows:

text-shadow:2px
				0px
				0px
				#f00;

Projection effect as shown:

Concrete projection data can refer to my article: CSS3 shadow;

The top is offset to the right without feathering, but Text-shadow can be multiple projections, so what happens if you are projecting at the same time in four directions up or down?

text-shadow:2px
				0px
				0px
				#f00, 0px
				-2px
				0px
				#f00, -2px
				0px
				0px
				#f00, 0px
				2px
				0px
				#f00;

Projection effect as shown:

To adapt to the text shape of the stroke effect, because the border can not meet the text of the stroke needs, just come up with such a way to achieve the stroke, and now back to push, since the border can not be used to stroke, then use Box-shadow projection strokes of the method to achieve the border.

The results are as follows:

I wrote a projection to the bottom:

-webkit-box-shadow:-1px
				1px
				2px rgba (50,50,50,0.1);

A little forward to the right offset, the basic shape effect has come out, but this is not yet, the transparency of the box is transparent, but the feeling is hazy, should be strengthened transparent treatment, otherwise the embodiment of permeability (can be compared with the first diagram).

Third, the permeability of

each face is different from the light, so there should be a difference in transparency , I put on, before, right to the viewer's transparency, and then pull out translucent to transparent gradient overlay to the basic box color, generating levels, I am a very light transition color overlay, the gradient is written as follows:

Background:-moz-linear-gradient ( -45deg, Rgba (255,255,255,0.3), Rgba (255,255,255,0.2)
				40%,rgba ( 255,255,255,0.2)
				70%,rgba (255,255,255,0.1));

Gradient from top left to right down slash, from 0% 0.3到40% 0.2,70% 0.2到100% 0.1; color is very light, if the coefficient of a major, the gradient will be very obvious, because of the different aspects of the gradient, do not explain, I believe that the source file will understand, I also follow my own feeling pull the gradient, there is no very professional ray projection research, if the wrong place you look out is also pointed out.

When the colors of each face are adjusted, found that "front and right" side of the surface with a line between the split, looks very neat, but I originally did not draw the sideline, the result ' left ' and ' after ' a bit of mixed, so still 12 lines one by one draw, appropriate, the front edge transparency of 0. 6, the side of 0.4, the back of 0.2, the prominent level.

Four, projection

Originally want to use reflect to achieve projection, but the effect is not ideal, the projection will be mixed with the original layer of the background color, do not come out translucent to transparent effect, and reflect is WebKit unique, Firefox does not, another think it method, however, it is not possible to add new tags for the projection effect, Lose the candle, in the case of the abandonment of IE naturally will think of pseudo class, the top border gradient has been used after, so here's the projection I use before to do, at the same time, pseudo-class do projection also has a benefit: pseudo-class layer is relative to the original layer, so modify the original layer position deformation state, The pseudo class layer is also relatively modified . Positioned directly below the corresponding surface, to the user's only front and right, so there are two projections, as shown:

The normal state box is closed, as shown in the front face, the pseudo class layer also follows the original layer in a skew transformation, and then I set the mouse over the "open" effect, just such a line of code:

. Box
				. Box_right:hover{-moz-transform:skew (0deg, 0deg);}

Let's not modify the pseudo class projection layer, it automatically adapts to the original layer, restore the transformation state.

Another point is that the projection is a translucent to transparent gradient from top to bottom, which is easy to implement for background colors, but what about borders?

I haven't dealt with the state of the border is like this:

The following projection is "flat", so the gradient projection of the border line must be made, that how to achieve the vertical gradient of the border, there are a lot of ways about the gradient border, but are all horizontal use of the characteristics of multiple borders to make, vertical no, I try to write with border, Write a gradient to Border-color, the result is not read at all, only adjust the transparency of the border only to make monochrome transparent, can not be gradually transparent, after observation, came up with a "bad idea", I said, the projection is from top to bottom translucent to transparent gradient, So what happens when you stack two of opaque things together?

For example, a layer with a transparency of 0.3 is above another level with a transparency of 0.3, which creates a region with a transparency of 0.6 at the junction, as shown here:

Speaking of which, you should understand, I wrote this. Modify the width of the face:

. Under
				. box_before:before{
				width:201px;

Let two sides of the translucent surface overlap, so that the middle overlapping area will be deep, make a "pseudo border" effect, as to the transparent part, 0 + 0 = 0, so transparent area is still transparent, so that the vertical gradient of the border to achieve the effect.

Five, content

I originally just want to make a box, since made out, of course, with the actual project contact, if allowed I also want to apply to the real project, the box as a carrier module, published on the above article, and even I want to make him can rotate to do picture wall.

The effect of hanging text is as follows:

The HTML code is as follows:

<div
					class= "InBox" >
<div
					class= "Conbox" >
 
The reason is to set a conbox,conbox in inbox inside margin padding, this is because Inbox set the width, if the width and padding mixed together, will make the width of the container deformation, so generally separate for the wonderful As for H3 to write a title, because I write Gotrip, H1,H2,H3 title is not unified classification, use confusion, and CSS is written, such as:. InBox h1{};
 
After writing a batch, some colleagues proposed to change the H1 to H3, if I had written it in the first place. InBox. title{}, then he said that when I changed the HTML tags, I do not have to move CSS, chastened wiser, here to share with you. Of course, sometimes also do not have to be too demanding, after all, the class name is a very hurt brain cells of the matter ha.
 
Personal Blog Original address: pure CSS3 transparent Crystal box