Colored Single-Element Sections
How do I make an colored single-element sections?
The power of CSS, eh? If you hate superfluous container divs and want a responsive, full-colored section with narrow content, here's how you do it.. What is a colored single-element sections? How do you make a colored single-element sections? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.
Colored Single-Element Sections - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colored Single-Element Sections</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; box-sizing: border-box;
}
body { color: white; font: 18px/1.5 'Avenir Next', 'Avenir', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif; -webkit-font-smoothing: antialiased;
}
p { margin: 1.5em 0; }
/* Container method */
section.container-method { background: #DA4453; width: 100%; padding: 50px;
}
section.container-method > .container { max-width: 700px; margin: 0 auto;
}
/* calc() method */
section.calc-method { background: #8CC152; width: 700px; margin: 0 auto; box-sizing: content-box; padding: 50px calc(50% - 350px);
}
@media (max-width: 800px) { section.calc-method { width: 100%; padding: 50px; box-sizing: border-box; }
}
/* Pseudo-Element Method */
section.pseudo-element-method { background: #3BAFDA; position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 50px;
}
section.pseudo-element-method:before,
section.pseudo-element-method:after { content: ''; display: block; width: 200%; height: 100%; background: inherit; position: absolute; top: 0;
}
section:before { right: 100%; }
section:after { left: 100%; }
html, body { overflow-x: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="container-method"> <div class="container"> <h1>Container Method</h1> <p><strong>This section uses a container <code><div></code> to create a full-width background and content that has a maximum width. Pretty easy stuff, but not all of us like superfluous markup. Keep scrolling to see how we can get around this.</strong></p> <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> </div>
</section>
<section class="calc-method"> <h1>calc() Method</h1> <p><strong>This section uses <code>calc()</code> on its left and right padding to achieve the same effect. Notice it needs a single media query to be fully responsive.</strong></p> <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</section>
<section class="pseudo-element-method"> <h1>Pseudo-Element Method</h1> <p><strong>This section uses absolutely-positioned <code>:before</code> and <code>:after</code> pseudo-elements to achieve the same effect. No media queries this time around, but horizontal overflow needs to be hidden on your <code><html></code> and <code><body></code> elements.</strong></p> <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</section>
</body>
</html>
Colored Single-Element Sections - Script Codes CSS Codes
* { margin: 0; box-sizing: border-box;
}
body { color: white; font: 18px/1.5 'Avenir Next', 'Avenir', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif; -webkit-font-smoothing: antialiased;
}
p { margin: 1.5em 0; }
/* Container method */
section.container-method { background: #DA4453; width: 100%; padding: 50px;
}
section.container-method > .container { max-width: 700px; margin: 0 auto;
}
/* calc() method */
section.calc-method { background: #8CC152; width: 700px; margin: 0 auto; box-sizing: content-box; padding: 50px calc(50% - 350px);
}
@media (max-width: 800px) { section.calc-method { width: 100%; padding: 50px; box-sizing: border-box; }
}
/* Pseudo-Element Method */
section.pseudo-element-method { background: #3BAFDA; position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 50px;
}
section.pseudo-element-method:before,
section.pseudo-element-method:after { content: ''; display: block; width: 200%; height: 100%; background: inherit; position: absolute; top: 0;
}
section:before { right: 100%; }
section:after { left: 100%; }
html, body { overflow-x: hidden; }
Developer | Kyle Foster |
Username | hkfoster |
Uploaded | September 04, 2022 |
Rating | 4.5 |
Size | 3,157 Kb |
Views | 30,360 |
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 |
JQuery vs. Native JS Selectors | 2,261 Kb |
Smart Fixed Header | 4,519 Kb |
Ken Burns Banner | 3,817 Kb |
Rift.js | 3,311 Kb |
Vanilla Flavored Unorphanize | 5,098 Kb |
Askew - A Subtle Parallax Banner Plugin | 5,081 Kb |
SVG Circular Scroll Progress Bar | 7,656 Kb |
Manipulating SVG With CSS | 3,640 Kb |
Rumble on Hover | 150,889 Kb |
Gradual.js | 2,685 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 |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
Shopping List | Markmurray | 6,015 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Heartbeat | Apetrov | 2,079 Kb |
TimelineMax Circular loader | Nicolund | 2,649 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Loading animation with css | Icebob | 2,947 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Banner Ad | Raquellorenzana | 4,172 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!