Black Mask Guided Mask CSS implementation method

first, the realization of micro-cloud

There are some changes in the site, in order to let users familiar with the new operating position, tend to add a boot, the common way is to use a black translucent mask, and then the area to be concerned is hollow.

Then in Friday I went to the micro-cloud around the time, also saw the guide layer, so the occupational disease and committed, to learn how others are realized. Here are the results of the observations:

In order to achieve the hollow mask effect, the author played a childhood building blocks of talent, the use of two-layer HTML structure, the inner layer using 5 separate areas of the mosaic formed, as for the middle of the shadow of the hollow area is used to achieve the image.

Although the final effect satisfies the demand of the product, for the user, the purpose has been achieved. However, from the code quality level, the potential for the possibility of experience, the scope of the use of the scene is still a lot weaker.

For example, if we have a large area of the hint area, then the middle of the size of the hollow area is not to change, then what about the background image? Make a new figure, someone saw the use of background-size:cover , that ie7,ie8 how to do? Oh, maybe the micro cloud doesn't need tube IE7, IE8.

If you do not need to tube IE7, IE8, then the implementation of the here will appear more small white. We actually only need a layer of labels, a layer of empty tags can achieve our results, and do not need pictures.

Second, my realization

Mainly lies in the change of thinking mode. Building blocks This idea everyone is relatively easy to think of, in line with daily cognition, but, but the code level, we can do thinking transformation, divergent thinking, the vast translucent mask layer, we do not think about the background color block background color block, can break through conventional thinking, it is considered a border, A very large and large border (we usually use border is the 1 pixel giant), so that we naturally have a hollow effect.

As indicated:

However, at present, the middle of the hollow area of the square, there is no way to turn round it?
Naturally, Method 1 is the element set super large corner, but, at this time in order to the border still fills the entire screen, the border border size to greatly increase, but, in order not to affect the page scroll bar, we have to nest a layer of labels, it seems verbose;
Method 2 is a method 1 of some aspects of the reverse thinking process, that is, the current element as the outer limit label, the inside to regenerate a large size pseudo-element, to achieve the adaptive size of the fillet effect, this good, HTML clean not verbose, CSS one step (code as shown below);

. cover::before {     content: ';     width:100%; height:100%;     border-radius:50%;     border:400px solid #000;     Position:absolute;     Left: -400px; Top: -400px;     / * Self-blind parameters, signal *     / Box-shadow:inset 0 0 5px 2px rgba (0,0,0,.75); }

As you can see, the various parameters of the above pseudo-elements are fixed parameter values, and external elements of the size of anything else, as long as the outer element size does not exceed 400, there will always be a positive ellipse inside the shadow of the skeleton (because the outside part will be .cover hidden), to understand the relationship between the fillet and the positive ellipse, can refer to my previous article: "When the autumn months, CSS3 Border-radius know how much?" ”。

Seeing is believing, hearing is false, you can click here: a layer of tags to achieve site-guided skeleton Mask function demo (click on the black mask will have a boot switch effect)

The HTML code used to demo this skeleton mask is as follows:

<div class= "Cover" ></div>

Yes, it's that simple, nothing nested, no five elements transformers fit, no pictures used.

Micro Cloud This picture more than 3K, to micro-cloud user access, estimated traffic fee to a lot of money.

And, if you click on the mask, you will find that the size of the open area is not the same every time, there are large and small, there is a high and thin, and the micro-cloud of the implementation of the method to meet this need is tricky; and, we found that the changes in these dimensions are animated to animate, not Bang Bang bang this blunt effect, The user visual guidance effect is better, you see, I from here to here, why can achieve animation effect, because our skeleton and inner shadow are CSS implementation, and micro-cloud image method, obviously cannot have animation.

JS code auxiliary
Of course, my implementation can not be separated from JS Auxiliary, JS work is very simple, so that the width /height and border size is associated with the element that needs to be booted.

I have deliberately made a common method coverGuide (name does not like to change casually):

var coverguide = function (cover, target) {var body = document.body, doc = document.documentelement; if (cover && target) {//target size (width/height)var targetwidth = target.clientwidth, targetheight = target.clientheight;//Page sizevar pageheight = doc.scrollheight, pagewidth = doc.scrollwidth;//offset of targetvar offsetTop = Target.getboundingclientrect (). Top + (Body.scrolltop | | doc.scrolltop), offsetleft = target.ge Tboundingclientrect (). Left + (Body.scrollleft | | doc.scrollleft);//Set size and Border-widthCover.style.width = targetwidth + ' px ';             Cover.style.height = targetheight + ' px ';             Cover.style.borderWidth = offsetTop + ' px ' + (pagewidth-targetwidth-offsetleft) + ' px ' +                  (pageheight-targetheight-offsettop) + ' px ' + offsetleft + ' px '; Cover.style.display = ' block ';//Resizeif (!cover.isresizebind) {if (Window.addeventlistener) {window.addeventlistener (' resize ', Fu                 Nction () {coverguide (cover, Target);                     });             Cover.isresizebind = true; } else if (window.attachevent) {window.attachevent (' onresize ', function () {Coverguid                 E (cover, Target);                 }); Cover.isresizebind = true;//IE7, IE8 Box-shadow hackcover.innerhtml = '  '; }         }     } };

Here the coverGuide method uses the native JS implementation, the ie6+ browser is compatible, does not rely on the JS library, everybody can use freely. Of course, written in a hurry, no strict verification, there may be a bug, you can leave a little snack.

The use is very simple and the syntax is as follows:

Coverguide (cover, Target);

whichcoverIt is.coverThis individual masking element,targetAre the elements we need to guide, the buttons, the navigation, whatever. Our cutout area is then automatically positioned totargetThe location, size is alsotargetThe size of the element. Super worry.

For specific use, refer to the demo above, the source code is on the page.

What about IE7,IE8?
If you need to be compatible with IE7,IE8, we might as well have the box effect, if the design and product can not be accepted, then use the picture to make a patch, such as the above JS code section:

cover.innerhtml = '  ';

My demo uses this image to look like this:

The size and shadow are all my own, designed to show that the real project you can ask the designer for pictures.

Then, the CSS super easy, the picture is full of our cover can.

/ * IE7, IE8 img * /. Cover > img {     width:100%; height:100%;     }

Iii. concluding remarks

This mask-covering idea is not just for this large area of guidance. We upload images, especially after uploading the avatar, to cut the Avatar, one of the common interaction is four weeks black, the middle skeleton, can also use huge border to achieve our effect, a layer of label is sufficient, do not need to go up and down the additional 4 layers of label splicing to achieve.

Internal adaptive fillet Effect single look at the text, many small partners do not know what I am talking about, suggest to the demo page to see the pseudo-element code, the real area size and the final effect, estimates will understand.

Thank you for reading, Welcome to communicate, welcome to provide a better way to achieve, there must be, but I do not have enough skill.

Above ~

Black Mask Guided Mask CSS implementation method