Example code for implementing hollowing effect with CSS

Effect principle

Mainly use CSS gradient to achieve some background hollowing that does not require cutting

Coupon Style

.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) {
    width: @width;
    height: @height;
    background:
              radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 51% no-repeat,
              radial-gradient(circle at bottom right, transparent @r, @lcolor 0) -(@width - @left) bottom ~'/' 100% 51% no-repeat,
              radial-gradient(circle at top left, transparent @r, @rcolor 0) @left 0 ~'/' 100% 51% no-repeat,
              radial-gradient(circle at bottom left, transparent @r, @rcolor 0) @left bottom ~'/' 100% 51% no-repeat;
}

.mixinsTicket1(@width, @height, @r, @top, @color) {
   width: @width;
   height: @height;
   background:
               radial-gradient(circle at bottom left, transparent @r, @color 0) left (@top - @height) ~'/' 51% 100% no-repeat,
               radial-gradient(circle at top left, transparent @r, @color 0) left @top ~'/' 51% 100% no-repeat,
               radial-gradient(circle at bottom right, transparent @r, @color 0) right (@top - @height) ~'/' 51% 100% no-repeat,
               radial-gradient(circle at top right, transparent @r, @color 0) right @top ~'/' 51% 100% no-repeat;
   &::after{
     content: '';
     display: block;
     position: absolute;
     width: calc(100% - 2 * @r);
     left: @r;
     top: @top;
     border-top: 1px dashed #fff;
     transform: translateY(.5);
   }
}

Cutaway effect

ps: The sawtooth is related to the display of the device

.mixinFlag(@width, @height, @bg) when(default()) {
    width: @width;
    height: @height;
    background:
              linear-gradient(45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) right,
              linear-gradient(-45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
 }
 .mixinFlag(@width, @height, @bg) when(@width > @height) {
    width: @width;
    height: @height;
    background:
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left,
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

.mixinsMark(@width, @height, @bg) {
    width: @width;
    height: @height;
    background:
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left,
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

ps: The above effects can be achieved in four directions. The codes for other directions are not posted, but the principles are the same

Plaid

css {
    width: 510px;
    height: 128px;
    background: #FFF;
    background-image: linear-gradient(rgba(182, 128, 102, .8) 8px, transparent 0),
                      linear-gradient(90deg, rgba(182, 128, 102, .8) 8px, transparent 0);
    background-size: 8px 14px, 14px 8px;
}

focus

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background:
  radial-gradient(closest-side at 50% 278rpx, transparent 140rpx, rgba(0, 0, 0, .12) 180rpx, rgba(0, 0, 0, .22) 200rpx, rgba(0,0,0,.3) 220rpx, rgba(0,0,0, .4)) no-repeat;
}

Summarize

Each gradient layer can be treated as a background image, which means that each gradient layer can specify its position, size, and repeat. Students who have used PS should know the concept of layers. The principle of our background layer stacking is similar (of course, gradients can also be used as background images). By controlling the size of the gradient, where it needs to be hollowed out, where it needs to be displayed, and whether it is tiled, you can achieve the basic effects in most scenes. Of course, a cut picture is faster, but sometimes a cut picture cannot adapt to all scenes.

Mastering the order in which background is written can help you conceive the effect you want in your mind:

Copy code

The code is as follows:

background: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: About Nginx gzip configuration

>>: Example tutorial on using the sum function in MySQL