Photoshop Question posted in
The official user guide can be found here.

CSS linear opacity – Photoshop

I want to create some flat-UI-like blocks but I need a little help. I got through some guides with linear-gradient(to left, rgba(255,255,255,0) ,rgba(255,255,255,1)); and so on, but I have’t found what I actually need.

Is there any way, how to do any layer with linear opacity? I have quite huge database of images, (so I definitely can’t photoshop them to have opacity by itself), and I am loading it into many “div” as a background-image. But I need to make the divs to start beeing transparent in about 75% of its width.

Is it somehow possible in CSS?

There is what I need to achieve:

enter image description here

Tags:

3

Answers


  1. 0

    You can set a linear gradient background with an extra stop to make an element transparent for 75% of its width, then linearly increase opacity.

    For example:

    background: linear-gradient(
   to right, 
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,1) 75%,
   rgba(0,0,0,0) 100%
);

    This makes an element have an opaque black (the three first rbga values) background for 75% of its width, then linearly transition to transparent in its rightmost 25%.

    Login or Signup to reply.
  2. 0

    I’m afraid something like that is not possible using CSS. Since you have many images, and provided you don’t show too many of them at once, you can consider using canvas to render the opacity to each image:

    http://jsfiddle.net/u256zkha/

    Login or Signup to reply.
  3. 0

    Using linear-gradient, partly from Jon’s answer.

    #parent{
  position:relative;
  width:fit-content;
}
#layer{
  position:absolute;
  width:100%;
  height:100%;
  background: linear-gradient(
   to right, 
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,0) 100%
);
}
    <div id="parent">
  <div id="layer"></div>
  <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=356&d=identicon&r=PG&f=1"/>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search