Vertical Linear Gradient

Nick

New Member
#1
I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line
Mã:
.sidebar {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  background-image: linear-gradient(90deg, #1559EC, #1559EC);
  color: #fff;
  font-size: 36px;
  font-family: Arial;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}

.sidebar:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
Mã:
<div class="sidebar">
  The quick brown fox
</div>
 

Admin

Administrator
Thành viên BQT
#2
The issue is not the gradient but the pseudo element. The gradient is using the same color so the angle is useless. What you need is to invert height/width values on the pseudo element and adjust the direction of its gradient. You can also replace the gradient of the main element by simple color:
Mã:
.sidebar {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  background:#1559EC;
  color: #fff;
  font-size: 36px;
  font-family: Arial;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}

.sidebar:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 50%;
  height: calc(100% - 4px);
  background: linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
Mã:
<div class="sidebar">
  The quick brown fox
</div>
And you can simplify it like below using multiple background on the main element:
Mã:
.sidebar {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  background:
   linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 2px 2px/50% calc(100% - 4px)no-repeat,
   #1559EC;
  color: #fff;
  font-size: 36px;
  font-family: Arial;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}
Mã:
<div class="sidebar">
  The quick brown fox
</div>
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top