CSS tips to help you create a fade effect on the background

Here is a link to my working example: click here. I am looking to adjust the fade effect to be shorter on the right side. Does anyone have 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>

Answer №1

Based on my interpretation of your inquiry, it seems that adjusting the width of the pseudo element to around 60px and modifying the color stops to approximately 50% should help achieve the desired result. Feel free to check out the updated demo: http://example.com/demo123

Answer №2

To modify the fading effect, simply alter the percentage values within your gradient.

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

If you increase the value from 0%, the fade will become shorter. Alternatively, adjusting the width of the element can achieve a similar result.

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

Create a child element to match the width of its grandparent element

Would it be possible to make the innermost div as wide as the section in my nested structure? Below is a snippet of the code: body { margin: 0 auto; padding: 0; background-color: blue; } #content { background-color: orange; padding ...

Adjust the height of a div containing variable elements

I'm having trouble adjusting the height of a div so that it can be scrolled all the way through. This div is positioned next to another one, so I set the overflow-y to scroll. Initially, I thought setting the height to auto would solve the issue, but ...

Unable to engage with any items on the display when the Material UI (MUI) Select Menu is active

In my web application, I am utilizing Material UI's Select component. Upon using it, I encountered a restriction where the user is unable to interact with anything else on the screen while the Select menu is open. This includes the inability to click ...

Count of elements in one flexbox row

Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...

Mobile devices consistently experiencing issues with JavaScript generated elements overlapping

I'm currently in the process of creating a quiz based on a tutorial I found at https://www.sitepoint.com/simple-javascript-quiz/. While I followed the tutorial closely and integrated Bootstrap, I am encountering an issue specifically with mobile devic ...

Tips for optimizing jQuery for use on mobile devices

My webpage functions correctly on IE, Chrome, and Firefox, as well as on my friend's Galaxy phone. The code is very simple: <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> function ...

CSS styling: Adjusting button placement to appear to the right of an HTML table

I've encountered a challenge with an HTML table that has dynamically generated columns through Ajax calls and jQuery, resulting in a variable table width. My aim is to include buttons at the top and bottom of the table that are aligned to the right b ...

Issue with Google Tag Manager where the class name is ending with '-ok' is causing problems

Utilizing Google Tag Manager for monitoring clicks within my search engine, which showcases various book details such as cover images, titles, and authors. When a book is in stock, it displays a checkmark and "Leverbaar" (In stock) below the price tag ($1 ...

The presence of an image within an HTML anchor is causing an unexpected artifact to

Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below: Image Link Here is the HTML structure: <div class="block-content"> ...

Determine in Jquery if all the elements in array 2 are being utilized by array 1

Can anyone help me figure out why my array1 has a different length than array2? I've been searching for hours trying to find the mistake in my code. If it's not related to that, could someone kindly point out where I went wrong? function contr ...

How to Disable Functionality Using a Different Function in Vanilla JavaScript

Is there a way to disable one function with another in JavaScript? I have a form that shows additional coursework inputs only if the user has completed extra work, but I want to add a failsafe in case they change their mind. I need assistance in writing a ...

The .selected child element must be positioned above all other .child elements within the .parent container, with each .child element being contained within an absolute positioned .parent

Is it possible to ensure that a .child element with the class selected appears on top of other .child elements without changing the HTML structure and CSS position property of .child and .parent? It would be preferable if any changes made are limited to to ...

The custom font fails to load on a customized Material UI theme

In my React web application, I tried to implement a custom font by writing the following code: import React, { FunctionComponent } from 'react' import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles' import SofiaPro ...

Tips for placing the footer at the bottom of the page and ensuring it is pushed below the content as the amount of content increases

I am struggling to position the footer on my webpage at the bottom of the screen when there is limited content. If the content height exceeds the screen height, I want the footer to flow below the content instead of staying fixed at the bottom. Despite tr ...

Ways to keep the position of an expanded collapsible table from Material UI intact

I found a collapsible table code snippet on this website: https://mui.com/material-ui/react-table/#collapsible-table However, there seems to be an issue where when I expand a row, the table "grows up" as it increases in size. This behavior is not ideal. I ...

Struggling with Bootstrap 4 modal functionality on mobile devices? Unable to close the modal or see its contents properly?

Attempting to incorporate the Bootstrap 4 modal into a block results in an incorrect display. The modal appears in a "fade in" mode and becomes unresponsive, making it impossible to close the modal without refreshing the browser. <div class="modal fade ...

Extract value from child div using JQuery and update text in another section of the page

Here is a fiddle showcasing the concept I am working on: https://jsfiddle.net/wvz9p3e7/1/ The code is written in PHP and involves a loop for cycling through 7 or 8 different garments. My goal is to have the window on the right side of the fiddle display t ...

What is the best way to implement Arial Narrow using CSS?

#content{ margin-left: auto; margin-right: auto; margin-top: 0; font-family: "Arial Narrow"; position: absolute; font-size: 10pt; } This snippet represents a section of my CSS code that specifies the Arial Narrow font family for the content area. ...

The background image is not displaying correctly on mobile devices

I'm struggling to make the image fit the entire screen on a mobile device using the code below. Interestingly, it displays correctly on my personal computer. #topContainer { height:1048px; width: 100%; padding: 0; margin: 0; } #div1 { ...

Creating dynamic content within an expandable div element

In my web app development, I have crafted a unique 'virtual desktop' where I can open draggable and resizable 'windows'. These windows are represented by absolutely positioned div elements. I am looking to create responsive content with ...