Horizontal rule decorations
How do I make an horizontal rule decorations?
Using the HR tag as decorative element.. What is a horizontal rule decorations? How do you make a horizontal rule decorations? This script and codes were developed by Dirk Drijkoningen on 19 January 2023, Thursday.
Horizontal rule decorations - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horizontal rule decorations</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Horizontal rule styling examples</p>
<br/>
<hr class="heart"/>
<br/>
<hr class="cutoff"/>
<br/>
<hr class="artdeco"/>
<br/>
<hr class="necklace"/>
<br/>
<hr class="airplane"/>
</body>
</html>
Horizontal rule decorations - Script Codes CSS Codes
hr { position: relative;
}
/* Heart ruler */
.heart { background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); width: 100%; height: 3px; color: transparent;
}
.heart:after { content: '\002665'; position: absolute; left: 49.1%; top: -12px; padding: 0 3px; font-size: 18px; color: red; background: white;
}
/* CutOff ruler */
.cutoff { width: 100%; color: transparent;; border-top: 3px dashed lightgrey;
}
.cutoff:after { content: '\002702'; position: absolute; left: 5.4%; top: -15px; padding: 0 3px; font-size: 18px; color: grey; background: white;
}
/* Art Deco ruler */
.artdeco { background: linear-gradient(to right, rgba(0,0,0,0), rgba(128,128,128,1), rgba(0,0,0,0)); width: 100%; height: 3px; color: transparent;
}
.artdeco:after { content: '\002022\002022\002756\002022\002022'; position: absolute; left: 47.6%; top: -18px; padding: 0 3px; font-size: 24px; color: grey; background: white;
}
/* necklace ruler */
.necklace { background: linear-gradient(to right, rgba(0,0,0,0), rgba(200,160,0,1), rgba(0,0,0,0)); width: 100%; height: 3px; color: transparent;
}
.necklace:after { content: '\00014D\00014D\00014D'; position: absolute; left: 48.2%; top: -6px; padding: 0 3px; font-size: 24px; font-weight: bold; color: #C8A000; background: white;
}
/* airplane ruler */
.airplane { background: linear-gradient(90deg, rgba(0,0,0,0), rgba(169,169,169,1)); width: 100%; height: 3px; color: transparent;
}
.airplane:after { content: '\002708'; position: absolute; right: 0%; top: -16px; padding: 0 10px 0 4px; font-size: 24px; color: #000000; background: white;
}
![Horizontal rule decorations - Script Codes](http://shots.codepen.io/RedJokingInn/pen/edqpMO-512.jpg)
Developer | Dirk Drijkoningen |
Username | RedJokingInn |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 1,874 Kb |
Views | 8,096 |
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 |
Fixed table header | 2,995 Kb |
DataTables Excel Header and Footer | 3,702 Kb |
DataTables percentage bar renderer plugin v1.1 | 3,513 Kb |
For loop | 1,388 Kb |
DataTables Excel cell style | 3,418 Kb |
DataTables Template | 3,037 Kb |
DataTables example of styling Excel export | 5,395 Kb |
Testtekening | 2,108 Kb |
Horizontal rule decorations | 1,874 Kb |
DataTables buttons and bootstrap 3 | 3,998 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 |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Easing | GreenSock | 2,043 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
Sticky menu on scroll | Senff | 2,869 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!