Bust any element out of its container

Developer
Taylor Hunt
Size
4,260 Kb
Views
12,144
  1. Bust any element out of its container Previews
  2. Bust any element out of its container HTML Codes
  3. Bust any element out of its container CSS Codes

How do I make an bust any element out of its container?

What is a bust any element out of its container? How do you make a bust any element out of its container? This script and codes were developed by Taylor Hunt on 29 September 2022, Thursday.

Bust any element out of its container Previews
IQ Test

Bust any element out of its container - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bust any element out of its container</title> <meta name="viewport" content="width=device-width,initial-scale=1">
<style> /* Just making the sample more intelligible */ article, p, code, .bust-out { background: rgba(0, 0, 0, 0.05); box-shadow: 0 0 1px #000; line-height: 1.4; } p { padding: 1em } li { margin: 1em } figure { position: relative; height: 1px; padding-bottom: 50%; } figure > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; object-fit: cover; } figcaption { color: white; font-size: 2em; position: absolute; top: 2em; right: 0; bottom: 0; left: 0; text-align: center; text-shadow: 0 5px 5px #000; } textarea { width: 100%; }
</style> <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> <article> <h1>Bust-outs</h1> <p class="bust-out"><strong>The technique at its simplest.</strong> In fact, it's a one-liner: <code>.bust-out { margin: auto calc(50% - 50vw) }</code>. I call them “bust-outs”. Bust-outs must be <code>display: block</code> — inline elements wrap within their containers!</p> <div class="bust-out max-width-800px"> <p>If you want a <code>max-width</code>, it gets a little trickier:</p> <ol> <li>Apply the above funky margins.</li> <li>Slap <code>overflow-x: hidden</code> on the <code>&lt;body&gt;</code> thanks to non-Firefox browsers triggering horizontal scrollbars.</li> <li>Apply a <code>width</code> of the value you want the bust-out to stop growing at. You can use percentages of the parent, like <code>width: 200%</code>.</li> <li>Finally, this incantation: <code>translateX(calc(50vw - 50%))</code>.</li> <li>All together now: <pre>.bust-out-with-max-width { margin: auto calc(50% - 50vw) width: {YOUR MAX WIDTH GOES HERE}; transform: translateX(calc(50vw - 50%));
}
body { overflow-x: hidden;
}</pre> </li> </ol> <p><a href="#mixin">By the way, I made you a SCSS mixin</a>.</p> </div> <p class="bust-out max-width-122%">Bonus: if you’re using <code>box-sizing: border-box</code> (you are, right?), this “just works” with padding and borders. If you’re not, well, apply it to your bust-outs. Trust me, you don’t want to try this without it.</p> <p>Busting out replaced elements, like images, doesn’t work. But since bust-outs’ aspect ratios change across screen widths, you’d have to treat them specially anyway, with <code>object-fit</code> or something. Like this:</p> <figure class="bust-out-image"> <img src="http://placeimg.com/640/480/tech/grayscale" alt=""/> <figcaption>Behold, a beautiful bust-out image</figcaption> </figure> <p>(When’s CSS getting <code>aspect-ratio</code>, anyway? The <code>padding-bottom</code> hack is like 7 years old.)</p> <h2>Drawbacks</h2> <p>Bust-outs rely on <code>calc()</code> and viewport units. <a href="http://caniuse.com/calc">The former is shaky in old Android and proxy browsers</a>, but at small sizes, bust-outs are indistinguishable from regular display anyway. <a href="http://caniuse.com/viewport-units"><code>vw</code> enjoys better support</a>, but is the same story.</p> <h2 id="mixin">SCSS Mixin</h2> <p><code><textarea readonly onfocus="this.select()" rows="24">@mixin bust-out-of($container-width, $max-width: null) { @if not $container-width or not $max-width { // Longhand, because you may not want to override existing vertical margins margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); // The required math gets really ugly without this, but you were using it anyway, right? box-sizing: border-box; } @else { width: if($max-width, $max-width, null); // Non-Firefox browsers include the scrollbar in `vw`, be careful; maybe set this to 98vw depending on your site. max-width: 100vw; transform: translateX(calc(50vw - 50%)); @media (min-width: $container-width) { // Longhand, because you may not want to override existing vertical margins margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } }
}</textarea></code></p>
</article>
</body>
</html>

Bust any element out of its container - Script Codes CSS Codes

.bust-out, .max-width-800px, .max-width-122\%, .bust-out-image { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; -webkit-transform: translateX(calc(50vw - 50%)); transform: translateX(calc(50vw - 50%));
}
/* * * Not part of the mixin * * */
article { margin: 0 auto; max-width: 30em;
}
.max-width-800px { max-width: 800px;
}
.max-width-122\% { border: 5px solid; max-width: 122%;
}
html { overflow-x: hidden;
}
Bust any element out of its container - Script Codes
Bust any element out of its container - Script Codes
Home Page Home
Developer Taylor Hunt
Username tigt
Uploaded September 29, 2022
Rating 3
Size 4,260 Kb
Views 12,144
Do you need developer help for Bust any element out of its container?

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!

Taylor Hunt (tigt) Script Codes
Name
Scaling inline SVG with preserveAspectRatio
Scaling inline SVG with object-fit
Filtered background with fallback for legibility
CSS Scroll thumb autosizing
SVG break-all text wrapping
Natural dimensions auto-sizing
A universal technique that might help the blank white page transition be less jarring
Scaling inline SVG with the stretcher-bar technique
Weird Animals
CSS Scroll thumb autosizing v2
Create amazing captions 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!