Weaving One Element Over and Under Another Element

css-tricks.com css-tricks.com2 years ago in#Dev Love190

In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The Bible Project’s website. They make really cool animations, and I mean, really cool animations. My attention, however, deviated from spiritualism to web design as I kept spotting these in-and-out border illustrations. Screenshot form The Bible Project website. I wondered if a similar could be made from pure CSS… and hallelujah, it’s possible! See the Pen Over and under border design using CSS by Preethi Sam (@rpsthecoder)on CodePen. The principal CSS standards we use in this technique are CSS Blend Modes and CSS Grid. First, we start with an image and a rotated frame in front of that image. <div class=”design”> <img src=”https://css-tricks.com/bird-photo.jpg”> <div class=”rotated-border”></div> </div> .design { position: relative; height: 300px; width: 300px; } .design > * { position: absolute; height: 100%; width: 100%; } .rotated-border { box-sizing: border-box; border: 15px #eb311f solid; transform: rotate(45deg); box-shadow: 0 0 10px #eb311f, inset 0 0 20px #eb311f; } The red frame is created using border. Its box-sizing is set to include the border size in the dimensions of the box so that the frame is centered around the picture after being rotated. Otherwise, the frame will be bigger than the image and get pulled towards the bottom-right corner. Then we pick a pair of opposite corners of the image and overlay their quadrants with their corresponding portion in a copy of the same image as before. This hides the red frame in those corners. We basically need to make a cut portion of the image that looks like below to go on top of the red frame. The visible two quadrants will lay on top of the .rotated-border element. So, how do we alter the image so that only two quadrants of the image are visible? CSS Blend Modes! The multiply value is what we’re going to reach for in this instance. This adds transparency to an element by stripping white from the image to reveal what’s behind the element. Chris has a nice demo showing how a red background shows through an image with the multiply blend mode. See the Pen Background Blending by Chris Coyier (@chriscoyier)on CodePen. OK, nice, but what about those quadrants? We cover the quadrants we want to hide with white grid cells that will cause the image to bleed all the way through in those specific areas with a copy of the bird image right on top of it in the sourcecode. <div id=”design”> <img src=”https://css-tricks.com/bird-photo.jpg”> <div class=”rotated-border”></div> <div class=”blend”> <!– Copy of the same image –> <img src=”https://css-tricks.com/bird-photo.jpg”> <div class=”grid”> <!– Quadrant 1: Top Left –> <div></div> <!– Quadrant 2: Top Right –> <div data-white></div> <!– Quadrant 3: Bottom Left –> <div data-white></div> <!– Quadrant 4: Bottom Right –> <div></div> </div> </div> </div> .blend > * { position: absolute; height: 100%; width: 100%; } /* Establishes our grid */ .grid { display: grid; grid: repeat(2, 1fr) / repeat(2, 1fr); } /* Adds white to quadrants with this attribute */ [data-white]{ background-color: white; } The result is a two-by-two grid with its top-right and bottom-left quadrants that are filled with white, while being grouped together with the image inside .blend. To those of you new to CSS Grid, what we’re doing is adding a new .grid element that becomes a “grid” element when we declare display: grid;. Then we use the grid property (which is a shorthand that combines grid-template-columns…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply