Skip to content

Instantly share code, notes, and snippets.

@connoro7

connoro7/full-width-bleed-index.html

Created October 11, 2022 19:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save connoro7/e3d598e66e9f5ec7e2c73f5bfda0fc2d to your computer and use it in GitHub Desktop.
Save connoro7/e3d598e66e9f5ec7e2c73f5bfda0fc2d to your computer and use it in GitHub Desktop.
Download ZIP
CSS full-width bleed background for section within container
Raw
full-width-bleed-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="full-width-bleed-style.css" />
</head>
<body>
<div class="container">
<section>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
</section>
<section class="full-bleed inverse">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
</section>
<section>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi maiores itaque quidem dolorum delectus cumque accusantium magnam, molestias voluptatum. Quidem!</p>
</section>
</div>
</body>
</html>
Raw
full-width-bleed-style.css
.container {
width: min(calc(80% - 2rem), 60rem);
margin-inline: auto;
}
.inverse {
--bleed-bg-color: hsl(280 50% 20%);
background-color: var(--bleed-bg-color, #121212);
color: #efefef;
}
.full-bleed {
box-shadow: 0 0 0 100vmax var(--bleed-bg-color);
clip-path: inset(0 -100vmax); /* Pulls box-shadow back to boundary of element */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment