Flex decorators
How do I make an flex decorators?
Using flex display. Using em borders. Using borders for color inheritance.. What is a flex decorators? How do you make a flex decorators? This script and codes were developed by Orion Drummond on 22 August 2022, Monday.
Flex decorators - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex decorators</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <section> <h1>Heading 1</h1> <p> <code>.decorate-rule(0.05em solid);</code> </p> <h2>Heading 2</h2> <p> <code>.decorate-rule(0.05em solid);</code> </p> <h3>Heading 3</h3> <p> <code>.decorate-rule(0.05em solid);</code> </p> </section> <section> <h1>Heading 1</h1> <p> <code>.decorate-rule(0.1em double);</code> </p> <h2>Heading 2</h2> <p> <code>.decorate-rule(0.1em double);</code> </p> <h3>Heading 3</h3> <p> <code>.decorate-rule(0.1em double);</code> </p> </section> <section> <h1>Heading 1</h1> <p> <code>.decorate-rule(0.05em dashed);</code> </p> <h2>Heading 2</h2> <p> <code>.decorate-rule(0.05em dashed);</code> </p> <h3>Heading 3</h3> <p> <code>.decorate-rule(0.05em dashed);</code> </p> </section>
</main>
</body>
</html>
Flex decorators - Script Codes CSS Codes
@import "//fonts.googleapis.com/css?family=Josefin+Slab:300";
body { font-family: 'Josefin Slab', serif; padding: 5rem 10rem;
}
@media only screen and (max-width: 60rem) { body { padding: 2.5rem 5rem; }
}
@media only screen and (max-width: 40rem) { body { padding: 1.25rem 2.5rem; }
}
main { color: #cc3700; font-size: xx-large;
}
code { font-size: smaller;
}
section:nth-of-type(1) h1,
section:nth-of-type(1) h2,
section:nth-of-type(1) h3 { display: -webkit-box; display: -ms-flexbox; display: flex;
}
section:nth-of-type(1) h1:before,
section:nth-of-type(1) h2:before,
section:nth-of-type(1) h3:before,
section:nth-of-type(1) h1:after,
section:nth-of-type(1) h2:after,
section:nth-of-type(1) h3:after { content: ""; display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-top: 0.05em solid; -webkit-transform: translateY(50%); transform: translateY(50%); margin: 0 1ex;
}
section:nth-of-type(2) h1,
section:nth-of-type(2) h2,
section:nth-of-type(2) h3 { display: -webkit-box; display: -ms-flexbox; display: flex;
}
section:nth-of-type(2) h1:before,
section:nth-of-type(2) h2:before,
section:nth-of-type(2) h3:before,
section:nth-of-type(2) h1:after,
section:nth-of-type(2) h2:after,
section:nth-of-type(2) h3:after { content: ""; display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-top: 0.1em double; -webkit-transform: translateY(50%); transform: translateY(50%); margin: 0 1ex;
}
section:nth-of-type(3) h1,
section:nth-of-type(3) h2,
section:nth-of-type(3) h3 { display: -webkit-box; display: -ms-flexbox; display: flex;
}
section:nth-of-type(3) h1:before,
section:nth-of-type(3) h2:before,
section:nth-of-type(3) h3:before,
section:nth-of-type(3) h1:after,
section:nth-of-type(3) h2:after,
section:nth-of-type(3) h3:after { content: ""; display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-top: 0.05em dashed; -webkit-transform: translateY(50%); transform: translateY(50%); margin: 0 1ex;
}
Developer | Orion Drummond |
Username | tappily |
Uploaded | August 22, 2022 |
Rating | 3 |
Size | 2,755 Kb |
Views | 34,408 |
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 |
Responsive radio tabs | 4,508 Kb |
Neon wallpaper | 2,635 Kb |
Blue folds wallpaper | 2,137 Kb |
Seltzer samples | 3,443 Kb |
3rd try | 3,465 Kb |
A Pen by Orion Drummond | 3,309 Kb |
Studded wallpaper | 2,252 Kb |
Google Web Font LESS Mixin | 2,492 Kb |
Warp scaffold | 11,353 Kb |
Can define | 1,995 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 |
Fireworks Show | Arianalynn | 3,048 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Animated skewed panes | NyX | 4,462 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!