Using Box-shadow to realize interval discoloration of layout area

Using Box-shadow to realize the interval color change preface of layout area

Before the customer made a Web site, the overall is 1200px wide. So, the whole page is in a 1200px box. But today, the customer suddenly asked to achieve such a discoloration effect, an area is gray, one area is white.

Original layout

The effect you want to achieve

I got an eraser. This is to replace the original html layout of ah ....

Ideas

First of all, I refused to change the html layout structure. I really do not want to modify html the layout, because the area involved will be more, so, how do not change the html structure of the situation, to achieve such a demand?

Background Image method

We can make a background image, which is gray and white spaced, and lets him tile across the page. To achieve a camouflage interval discoloration.

Pros: Do not change the DOM structure.

Disadvantages:
1. All sections are required to be highly consistent.
2. Do not take care of the top and tail. Because the html structure is not modified, it must be on body or html above the background image, so as not strong tail
3. If you want to change html the structure, you must add a wide box to all the plates that require discoloration. 100%

Well, the comprehensive analysis, the background picture does not seem to solve my problem perfectly. It doesn't matter, I have a very strong CSS. Suddenly I thought of a good CSS attribute box-shadow .

box-shadowProjection method

First, look at our existing HTML structure.

<div class="Home">    < section class="Floor"></section >    < section class="Floor"></section >    < section class="Floor"></section >    < section class="Floor"></section >    < section class="Floor"></section ></div>

The default CSS is as follows

. Home {width: px;  margin: 0 auto; }    . Floor {padding:  0px;  height: px;  width: px; }

The other things you don't want to do are not written, mainly these parameters.

My solution is to use the box-shadow properties, the left and right respectively to add the equivalent of the gray projection of their own width, and to add a gray background, so that the overall color change. The code is as follows:

. Home {width: px;  margin: 0 auto; }    . Floor { padding:  0 px ; height: px ; width: px ; box-shadow: 0 px  #fafafa,- 0 px #fafafa  ; background: #fafafa  ;}

As above, sure enough, to achieve a gray background tile. However, all the boxes have this tiled gray background. What we need to achieve is the interval discoloration, not all of them turning into a gray background.

What do I need to do to .floor add a style????

no need , strong css once again male up!!

I changed the code to the following:

. Home {width: px;  margin: 0 auto; }    . Floor {padding:  0px;  height: px;  width: px; }    . Floor: Nth-child (2n){  box-shadow: 0 px  #fafafa,-px 0 #faf AFA;     background: #fafafa; }

OK, perfect for the effect.

Thinking

This is not a 100% tile, but the width is limited. So, under high enough resolution, there may be problems.

However, in my case, 1200*3 = 3600 this width is sufficient for the current 99.999% display. The rest is 4K local tyrants, and I'm sure it won't look like a full screen on such a high-resolution monitor. So, there is no problem with this writing!!

But we are perfect. Even one of the millions would do that, and not worrying. But we box-shadow are omnipotent ... Let's Change the code:

. Home {width: px;  margin: 0 auto; }    . Floor {padding:  0px;  height: px;  width: px; }    . Floor: Nth-child (2n){  box-shadow: 0 px  #fafafa,2400px 0 #f Afafa,-0 px  #fafafa,-2400px 0 #fafafa        ;     background: #fafafa; }

After changing to this, 1200*5 = 6000 it is such a width, enough to fight again 10 ~ ~ ~

Summary

CSS, True TM powerful!!

This article is original by Fungleo, allow reprint. But reprint must be signed by the author, and keep the article starting link. Otherwise, legal liability will be investigated.
Starting Address: http://blog.csdn.net/FungLeo/article/details/51661222

Using Box-shadow to realize interval discoloration of layout area