I am in the process of bringing a unique webpage layout to life. The design is a bit unconventional, and I'm not sure if it's feasible. Essentially, I plan to have a fixed-width content box of 900px positioned in the center of the page body. I aim to incorporate two vertical columns with fading png images into the page. One png will fade from solid black on the left to transparent on the right, while the other will fade from solid black on the right to transparent on the left. Each column will be 250px wide. Once all elements are positioned, the overall layout should resemble a paper that has faded edges on both sides.
However, the challenge lies in resizing the page. When the screen width is less than 1500px (resulting in part of both columns extending beyond the screen), I want the columns to shrink to zero rather than sliding under the content box. In the accompanying images below, note the positioning of the black outline representing the screen, blue representing the content, and red depicting the columns. At a screen width of 1500px, the columns and content align perfectly, creating the illusion of a fading image. As the screen widens, the columns separate while still maintaining the faded effect.
Unfortunately, due to limitations, I cannot include the actual images at this time.