Example code for implementing hollowing effect with CSS

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

Recommend

Summary of methods to prevent users from submitting forms repeatedly

Duplicate form submission is the most common and ...

Implementation of ssh non-secret communication in linux

What is ssh Administrators can log in remotely to...

Implementation of a simple login page for WeChat applet (with source code)

Table of contents 1. Picture above 2. User does n...

Steps for encapsulating element-ui pop-up components

Encapsulate el-dialog as a component When we use ...

Detailed example of sorting function field() in MySQL

Preface In our daily development process, sorting...

HTML+jQuery to implement a simple login page

Table of contents Introduction Public code (backe...

Mini Program Development to Implement Unified Management of Access_Token

Table of contents TOKEN Timer Refresher 2. Intern...

WeChat applet custom scroll-view example code

Mini Program Custom Scroll-View Scroll Bar Withou...

Specific use of CSS content attribute

The content attribute is generally used in the ::...

Disable autocomplete in html so it doesn't show history

The input box always displays the input history wh...

Docker sets up port mapping, but cannot access the solution

#docker ps check, all ports are mapped CONTAINER ...

Use Xshell to connect to the Linux virtual machine on VMware (graphic steps)

Preface: I recently started to study the construc...

Solve the abnormal error when building vue environment with webpack

Table of contents First, configure package.json T...

Zen Coding Easy and fast HTML writing

Zen Coding It is a text editor plugin. In a text ...