CODEWITHSUNDEEP
htmlcsssass
A Python
A Python

Reputation: 93

Trying to produce faded margins

I am trying to produce a faded gradient for the left and right margins on my website, but the only way I can think to go about it is found on this fiddle: https://jsfiddle.net/btzr1vox/

body {
   background-color: #fafafa;
}
 
.box-1 {
    background-image: linear-gradient(to left, rgb(250, 250, 250) 0%, rgb(0, 0, 0, 1) 15%);
    display: inline-block;
    width: 50%;
}

.box-2 {
    background-image: linear-gradient(to left, rgb(0, 0, 0) 85%, rgb(250, 250, 250, 1) 100%);
    float: left;
    width: 50%;
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}

.col-1-of-2 {
    width: calc((100% - #{6rem}) / 2);
}

.color {
  color: white;
}

.column-1 {
  margin-right: 3rem;
}

.column-2 {
  margin-left: 3rem;
}

It works, but it divides the the page into to columns, which I don't want, as I would have to repeat the process for each section of the website. This seems like a hassle, especially if I want to change the width of the columns, such as a block that only takes up 1/3 of the page, and the other 2/3, and so on.

Upvotes: 1

Views: 87

Answers (1)

Jos van Weesel
Jos van Weesel

Reputation: 2198

I would suggest separating the white gradient from the elements that hold your text, so they're not dependent on each other. Even easier: if you create two elements and apply the position: absolute; property on them, you can re-use them wherever you want: on top of the whole background, or per section.

If you run into problems with text covering the gradient, you can of course give the element that holds your text a padding equal to the width of the gradients, so they never touch them.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background-color: #36393f;
}

.gradient-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.gradient-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background-image: linear-gradient(
    to left,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
<div class="gradient-left"></div>
<div class="gradient-right"></div>

Upvotes: 1

Related Questions