Flex decorators

Size
2,755 Kb
Views
34,408

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 Previews

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;
}
Flex decorators - Script Codes
Flex decorators - Script Codes
Home Page Home
Developer Orion Drummond
Username tappily
Uploaded August 22, 2022
Rating 3
Size 2,755 Kb
Views 34,408
Do you need developer help for Flex decorators?

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!

Orion Drummond (tappily) Script Codes
Create amazing love letters 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!