Horizontal rule decorations

Developer
Dirk Drijkoningen
Size
1,874 Kb
Views
8,096
  1. Horizontal rule decorations Previews
  2. Horizontal rule decorations HTML Codes
  3. Horizontal rule decorations CSS Codes

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 Previews
IQ Test

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
Horizontal rule decorations - Script Codes
Home Page Home
Developer Dirk Drijkoningen
Username RedJokingInn
Uploaded January 19, 2023
Rating 3
Size 1,874 Kb
Views 8,096
Do you need developer help for Horizontal rule decorations?

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!

Dirk Drijkoningen (RedJokingInn) Script Codes
Name
DataTables buttons and bootstrap 3
Bootstrap Dynamic Modal
Fixed table header
DataTables example of styling Excel export
Maanden en dagen
DataTables Template
DataTables Excel cell style
Just a test
Functie en array
For loop
Create amazing web content with AI!

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!