Modern design featuring soft borders that blend into the background

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.

Answer â„–1

To achieve the best result, it is recommended to combine jQuery and CSS3.

jQuery allows you to center the main content while having a div on both sides. On the other hand, CSS3 enables you to create gradients on both sides without the need for images. The only drawback is that non-CSS3 compliant browsers, such as IE8 and earlier, may not display the gradient. However, there are addons like Modernizr and IE Chrome Tab that can help overcome this issue.

jQuery

$(document).ready(function(){
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

$(window).resize(function() {
 windowWidth = $(window).width();
 divWidth = (windowWidth - 900) / 2;
 $('#left_container').css({width: divWidth+"px"});
 $('#right_container').css({width: divWidth+"px"});
});

CSS for Left Div

background-image: linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(90 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(90 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 90 90,
 right 90,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);

CSS for Right Div

background-image: linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -o-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -moz-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -webkit-linear-gradient(270 , #FFFFFF 0%, #000000 52%);
background-image: -ms-linear-gradient(270 , #FFFFFF 0%, #000000 52%);

background-image: -webkit-gradient(
 linear,
 270 270,
 left 270,
 color-stop(0, #FFFFFF),
 color-stop(0.52, #000000)
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Require a date picker in Vuetify, prohibiting any kind of text input

I am working with vuetify to create a date picker for capturing a user's birthday. I need the date picker to be a required field in my form and only accept date values. Here is what I have attempted: <v-flex xs12> <v-menu ref="menu" ...

Is it possible to verify .0 with regular expressions?

In my project, I have a field that requires whole numbers only. To validate this, I used a regex validation /^\d{1,3}$/ which successfully validates whole number entry and rejects decimal points starting from .1. However, I encountered an issue where ...

Uploading Images Dynamically with Ajax and jQuery in PHP

[Resolved Previous Issue] Recently, I obtained an image upload script that utilizes Ajax and jQuery. My goal is to restrict the maximum number of uploads to just 8 images. Any suggestions or advice would be greatly appreciated. Source of Download: ...

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

Positioning JQuery tooltips

I've been developing a simple tooltip tool (check out the fiddle link below), but I'm encountering some issues with positioning. My goal is to have the tooltip appear centered and above the clicked link, however right now it appears at the top le ...

Modifying the input field's name attribute while utilizing multiple datasets in typeahead.js

I am currently utilizing typeahead.js with multiple datasets, following the guidance provided here. I have chosen not to employ Bloodhound in my implementation, resulting in some differences in my code structure, outlined below: $('#search .typeahead ...

Unable to load Webfont Trade Gothics in Internet Explorer 8

The following code is used to ensure proper functionality of webfonts across all browsers: @font-face { font-family: 'TradeGothic-BoldCondensedNo20'; src: url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.eot?' ...

Connecting a string array to the navigation bar

Need Assistance with AngularJS: In my controller, I have a string array that looks like this: var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.menuitems =['Home','About&apos ...

Personalize the option for yiiootstrap4ActiveField::radioList in Yii2

I am currently using yii\bootstrap4\ActiveField::radioList and I am attempting to include HTML tags inside the options of my radioList. $list = [ 0 => '<strong>Option1</strong><br> lorem ipsum lorem ipsum&ap ...

Share your hefty files through an online portal

What is the most effective method for allowing users to upload large files from their web browsers to a server? We are talking about file sizes of 200MB or even up to several gigabytes. I have brainstormed some potential solutions to this issue, although I ...

Prevent the left border from displaying on a link that wraps to a new line

Excuse me, I am facing an issue with a pipe separator in my subnav bar between links. The problem is that the first link on a new line retains the left-border that should be disabled. How can I prevent this border from appearing on the first link of a new ...

Using values from an appsettings.json file as href variables in an AMP html: a complete guide

Currently developing an AMP website with the URL www-dev.example.com, directing users to a sign-up page. The sign-up page is hosted on an identity server under the subdomain auth.www-dev.example.com. Now, the goal is to deploy the AMP website to a staging ...

Creating a menu with items and listeners from a kmllayer - a step-by-step guide

Currently, I am working with a map that includes a kmllayer. This layer has been added using the following code: ctaLayer = new google.maps.KmlLayer('http://www.npd.no/engelsk/cwi/pbl/en/aFactGlobe/disc/ActivityStatus_Producing_labels.kml'); ...

Efficient page navigation bar that doesn't clutter the layout

I'm facing an issue with my navbar setup. I want it to stay at the top of the page without being sticky. However, the presence of the navbar is causing a scroll to appear on my page. This happens because: The navbar takes up space I sometimes use tri ...

Struggling to populate a dropdown list with HTML, PHP, and MySQL

Here is the code snippet for creating a payment form: Everything seems to be working fine, but there is an issue with the supplier-ID dropdown. The dropdown is being created but it is not fetching data from the mysql table and no errors are being display ...

How to easily remove margin in a Bootstrap alert component

I'm having difficulty removing margins within a bootstrap alert component and I can't figure out why! https://codepen.io/weellydooh/pen/MWKKoqg <div class="alert alert-primary" role="alert"> <p>A simple primary alert—check it ...

What is the best way to maximize vertical space in every element on a page?

How can I achieve a layout similar to the image shown? I want three distinct sections: a navigation bar fixed at the bottom, and left and right sides each taking up 50% of the screen. Additionally, all boxes on the left side should have equal height. I am ...

Incorporating a Bootstrap input group within a <td> element of a table

Encountering an issue when attempting to include a bootstrap input-group-addon with the input field nested inside a <td> tag within a table. Once all necessary classes are applied, there appears to be some spacing between the sign and the input field ...

Is there a solution for the noticeable delay in loading fonts on a web page?

I've encountered an issue in my React project where a Google font I'm using seems to briefly load as a different font before switching to the correct one. How can I prevent this from happening? This is how I'm loading the font in public/ind ...

Tips on utilizing Blazorise's numeric edit group with grouping functionality

I recently attempted to utilize the numeric edit group separating attribute in Blazorise but encountered issues. According to the documentation, it should be possible to use this feature, however, my attempts were unsuccessful. I would greatly appreciate ...