Home >Web Front-end >CSS Tutorial >Pure css3 to achieve stationery/classmate registration effect (code example)
Implementation idea:
The grid background is implemented by the linear gradient of css3.
The holes in the paper are composed of circles and cylinders. Multiple holes can be realized by tiling box-shadow.
Actual code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg-grid { height: 400px; padding: 10px; padding-top: 64px; background-color: #efefef; background-image: linear-gradient(#e7e6e6 1px, transparent 0), linear-gradient(90deg, #e7e6e6 1px, transparent 0); background-size: 21px 21px, 21px 21px; background-position: center; } .bg-grid:before, .bg-grid:after{ content: ''; position: absolute; z-index: 0; left: 50%; transform: translateX(-50%); display: inline-block; background-color: #fff; height: 28px; box-shadow: 68px 0 0 0 #fff, calc(68px * 2) 0 0 0 #fff, calc(68px * 3) 0 0 0 #fff, calc(68px * 4) 0 0 0 #fff, calc(68px * 5) 0 0 0 #fff, -68px 0 0 0 #fff, calc(68px * -2) 0 0 0 #fff, calc(68px * -3) 0 0 0 #fff, calc(68px * -4) 0 0 0 #fff, calc(68px * -5) 0 0 0 #fff; } .bg-grid:before { top: 0; width: 10px; } .bg-grid:after { top: 26px; width: 28px; border-radius: 50%; } .bg-grid{ } </style> </head> <body> <div></div> </body> </html>
More cool CSS3, html5, javascript special effects codes, all in: js special effects collection
More related tutorials Please visit CSS3 latest version reference manual
The above is the detailed content of Pure css3 to achieve stationery/classmate registration effect (code example). For more information, please follow other related articles on the PHP Chinese website!