CODEWITHSUNDEEP
css
fishera
fishera

Reputation: 799

Fade background help - CSS

Here is my working example link. I want to make fade little bit shorter so that it wouldn't be so close to the end on the right. Any suggestions?

.order-page-left {
  width: 275px;
  background: white;
}
.orders-list .item {
  display: block;
  border-bottom: 1px solid #e0e0e0;
  color: #181818;
  outline: 0;
  position: relative;
}
.orders-list .item .inner {
  padding: 7px 0 10px;
}
.orders-list .item .inner:before {
  content: "";
  height: 100%;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
}
.orders-list .item .detail {
  float: left;
  padding: 0 0 0 15px;
  width: 50px;
}
.orders-list .item .detail .smaller {
  font-size: 12px;
  color: #808080;
}
.orders-list .item .name {
  margin-left: 65px;
}
.orders-list .item .name .info {
  font-size: 12px;
  color: #808080;
}
<div class="order-page-left">
    <div class="orders-list"> <a id="documentLink0" href="/service/sales/documents/order/quickView.do?envId=406519&amp;isDraft=false&amp;isNewDoc=true&amp;docStatus=" class="item highligh">


      <!-- onClick="getDocumentDetails(this, event);" -->
      <div class="inner cfx">
        <div class="detail">

          <b>
							
                               <span class="showDate">
                                    <span class="date" style="display: none;">03.07
                                    </span>
                                    <span class="exp_date">
                                    </span>
                                    <span class="docDate" style="display: inline;">11.05
                                    </span>
                               </span>
							
								</b>

          <div class="smaller">
            <span class="showDate">
                                    <span class="date" style="display: none;">11:25
                                    </span>
            <span class="exp_date">
                                    </span>
            <span class="docDate" style="display: inline;">09:07
                                    </span>
            </span>
          </div>
        </div>
        <div class="name">
          <b>AUTO EDIBUYER1</b>



          <div class="info">
            142.81 JMETER_20150703112433000000120:1:L
          </div>
        </div>
      </div>
    </a>

    </div>
</div>

Upvotes: 1

Views: 59

Answers (2)

kthornbloom
kthornbloom

Reputation: 3730

You can adjust the fade by changing the percent values in your gradient.

background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);

Changing 0% to a higher value will shorten it. Or, just change the width of the element.

Upvotes: 1

Florian Wendelborn
Florian Wendelborn

Reputation: 1757

As far as I understand your question you need to change the width of the pseudo element to something like 60px. You also need to change the color stops to something like 50%. Here is the updated fiddle: http://fiddle.jshell.net/nt2z1chv/1/

Upvotes: 1

Related Questions