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

Graphical explanation of the function call of proto file in Vue

1. Compile proto Create a new proto folder under ...

HTML basic syntax is convenient for those who are just starting to learn HTML

1.1 General marking A general tag consists of an ...

Detailed explanation of the correct use of the if function in MySQL

For what I am going to write today, the program r...

CSS Paint API: A CSS-like Drawing Board

1. Use Canvas images as CSS background images The...

CentOS7.5 installation of MySQL8.0.19 tutorial detailed instructions

1. Introduction This article does not have screen...

Linux MySQL root password forgotten solution

When using the MySQL database, if you have not lo...

React+Antd implements an example of adding, deleting and modifying tables

Table of contents Table/index.js Table/model/inde...

Detailed explanation of the basic usage of the Linux debugger GDB

Table of contents 1. Overview 2. gdb debugging 2....

Summary of several key points about mysql init_connect

The role of init_connect init_connect is usually ...

Native JS to implement hover drop-down menu

JS implements a hover drop-down menu. This is a s...

How to use mixins in Vue

Table of contents Preface How to use Summarize Pr...

React implements the addition, deletion, modification and query of todolist

Table of contents Take todolist as an example The...

Analysis of Sysbench's benchmarking process for MySQL

Preface 1. Benchmarking is a type of performance ...

Detailed explanation of Nginx forwarding socket port configuration

Common scenarios for Nginx forwarding socket port...

Detailed explanation of the problem of configuring servlet url-pattern in tomcat

When configuring web.xml for tomcat, servlet is a...