Ruler CSS gradient background pattern
How do I make an ruler css gradient background pattern?
What is a ruler css gradient background pattern? How do you make a ruler css gradient background pattern? This script and codes were developed by Jelmer on 02 December 2022, Friday.
Ruler CSS gradient background pattern - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ruler CSS gradient background pattern</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
A background-gradient pattern. Kinda looks like a ruler.
-->
</body>
</html>
Ruler CSS gradient background pattern - Script Codes CSS Codes
body { background-color: #09A; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 2%, transparent 2%), -webkit-linear-gradient(left, transparent 70%, #09A 70%), -webkit-linear-gradient(transparent 20%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0.7) 21%, transparent 21%, transparent 40%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.7) 41%, transparent 41%, transparent 60%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.7) 61%, transparent 61%, transparent 80%, rgba(255, 255, 255, 0.7) 80%, rgba(255, 255, 255, 0.7) 81%, transparent 81%); background-image: linear-gradient(rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 2%, transparent 2%), linear-gradient(90deg, transparent 70%, #09A 70%), linear-gradient(transparent 20%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0.7) 21%, transparent 21%, transparent 40%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.7) 41%, transparent 41%, transparent 60%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.7) 61%, transparent 61%, transparent 80%, rgba(255, 255, 255, 0.7) 80%, rgba(255, 255, 255, 0.7) 81%, transparent 81%); background-size: 25% 100px; background-repeat: repeat-y; min-height: 2000px; /* scroll me baby */
}
Developer | Jelmer |
Username | jelmerdemaat |
Uploaded | December 02, 2022 |
Rating | 3 |
Size | 1,964 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple smart calculated grid system | 2,975 Kb |
Animated counter element | 3,412 Kb |
Little loading spinner | 2,599 Kb |
Justified divs, attempt 2 | 1,795 Kb |
A Pen by Jelmer | 1,718 Kb |
How to force download a file with JavaScript | 2,272 Kb |
Ungrid with gutters | 1,644 Kb |
Justified divs, attempt 3 | 1,816 Kb |
Responsive form design | 4,074 Kb |
Loading spinner moving bars | 2,025 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Learning canvas drawing | Aurer | 2,204 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Carousel Test | Sbirchall | 1,509 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Simple Weather App | Cmwebby | 0 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!