Colored Single-Element Sections

Developer
Kyle Foster
Size
3,157 Kb
Views
30,360
  1. Colored Single-Element Sections Previews
  2. Colored Single-Element Sections HTML Codes
  3. Colored Single-Element Sections CSS Codes

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

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>&lt;div&gt;</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>&lt;html&gt;</code> and <code>&lt;body&gt;</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; }
Colored Single-Element Sections - Script Codes
Colored Single-Element Sections - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 4.5
Size 3,157 Kb
Views 30,360
Do you need developer help for Colored Single-Element Sections?

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!

Kyle Foster (hkfoster) Script Codes
Name
Vanilla Flavored Unorphanize
Ken Burns Banner
Cattywompus - A Subtle Parallax Banner Plugin
Vanilla Flavored Hypher
Manipulating SVG With CSS
Rift.js
Askew - A Subtle Parallax Banner Plugin
Super Simple Fader
Messing Around with CSS3 Shadows
Slimslider.js
Create amazing sales emails 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!