[Shenzhen] DJI Innovation Internet team front end and a large number of positions in the recruitment (push 15-50K + rich year-end + shares) resume please send to [email protected], if appropriate, the same day reply, the same day push. More welfare

This article shares the requirements I have encountered recently and the problems I have encountered in the process of solving them, as well as learning new knowledge. Released in w3ctrain

Look at the cool animations and figure out how to do it.

Starting from the demand I was making recently, A coupon style, I thought it was not a big deal when I passed the design draft, so I agreed to it. When I really started to develop, I encountered problems, mainly in the way of hollow out effect. The requirement is that the background can be matched, and the ticket body can be matched with the background picture, and then hollow out is true hollow out.

I have tried many schemes, including pseudo-class simulation, background mapping and Canvas drawing, but none of them satisfied me. The front end is so difficult, even kneeling down to beg the designer girl to change the draft, but also failed to get sympathy, not only that, but also was thrown a face, you see, the others didi can do.

We are different!!

No way, now the pain is the original brain into shi, there is no room for discussion, dry! Searching for the ticket keyword, I found a similar effect on Codepen.

See the Pen CSS Concert ticket purchase by Helkyle (@HelKyle) on CodePen.

With the hollowing out and the gradient, I’m convinced I’ve found the final solution. Look at the source code, praise! It’s definitely a good idea to splice it in three sections!

A goose! What we want is for the coupon to have a gradient in the background and split it into three sections so the gradient has to be split into three sections accordingly, which is not acceptable.

It seems ClipPath can be used to crop content. Search for articles you’ve seen on CSS Tricks and marvel at the effect (you can tune clip-Path on Clippy). From the documentation, it’s also not appropriate for this scenario. The hollow part is neither regular graphics nor a whole, give up.

CSS Mask attribute

Like the Masks in Sketch, CSS Masks allow the Mask areas to be seen through, leaving the opaque areas visible.

Usage and background are basically the same, learning zero cost. For example, mask-image, mask-origin, mask-position, mask-repeat, and mask-size are all consistent with background. Because it is too simple, not here worded, more usage or look at the document or Zhang Xinxu -CSS mask CSS3 mask/masks in detail,

The final result of my requirement with mask is as follows:

See the Pen Using Mask To Create Ticket Hollow Effect. by Helkyle (@HelKyle) on CodePen.

Think about the requirements for a long time, cut a map, write a line of core code to solve. The key point is simple enough! Easy to use! Anything can make a really cool effect.

See the Pen Mask Effect – DJI by Helkyle (@HelKyle) on CodePen.

It’s worth mentioning that mask supports SVG, PNG and GIF, like Codepen who made a SpongeBob animation.

See the Pen #CodePenChallenge – Animated css mask-image by Tony Banik (@tonybanik) on CodePen.

The core code is just one line, using a SpongeBob GIF. Without the mask attribute, I don’t know how to start.

img {
  mask-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/10/18/1668599f2b92301d~tplv-t2oaga2asx-image.image);
}
Copy the code

Wait, what about compatibility?

compatibility

As seen from CanIUse, the current mask compatibility is 83.15% (most need to be prefixed with -webkit-), IE && Edge does not support it at all. For some unsupported browsers, Feature Query can also be used for compatibility.

@supports not (mask-size: cover) {// Unsupported styles}Copy the code

Chicken Soup moment

The front end technology is being updated and iterated very quickly. Many of the attributes that were experimental a few years ago are now ripe for harvest. This reflects the importance of accumulating more new knowledge at ordinary times. For example, grid and Houdini can’t be produced in a short period of time when they just touch it. When they need to use it, they remember that there is such a thing. The cloud quietly said:

Nothing. Just a quick look in the crowd.

Related articles

  • Clipping and Masking in CSS
  • Using CSS Clip Path to Create Interactive Effects
  • CSS Masking
  • This section describes the CSS mask CSS3 mask and masks

Changelog

Fix: Actually, the designer is very easy-going. He doesn’t give me a hard time.

Some of the landscape images are from Skypixel