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

How to smoothly hide part of an element – Photoshop

I’ve a row of elements with some values in a container and its width is limited (eg 500px), but all of the elements takes more (eg 800px)

Using overflow-x: hidden it looks like: DEMO

section {
  display: flex;
}

#container {
  max-width: 500px;
  height: 30px;
  overflow-x: hidden;
}

#container>* {
  border: solid 1px black;
  padding: 2px;
  margin-right: 4px;
}
<section id="container">
  <section>2.43</section>
  <section>2.14</section>
  <section>2.17</section>
  <section>2.17</section>
  <section>2.14</section>
  <section>2.44</section>
  <section>2.14</section>
  <section>2.34</section>
  <section>2.35</section>
  <section>2.15</section>
  <section>3.10</section>
  <section>3.10</section>
  <section>3.10</section>
  <section>2.14</section>
  <section>2.14</section>
  <section>2.14</section>
  <section>2.34</section>
  <section>2.35</section>
  <section>2.15</section>
  <section>3.16</section>
  <section>1.10</section>
  <section>4.10</section>
</section>

But I want to see that (made in photoshop):

enter image description here

Is there a way to implement this smooth disappear without using box-shadow, because I’m going to crate a dynamic background?

Tags:

2

Answers


  1. 0

    Use mask:

    section {
  display: flex;
}

#container {
  max-width: 500px;
  height: 30px;
  overflow-x: hidden;
  /* simply adjust the 40px to control the fading */
  -webkit-mask:linear-gradient(-90deg,#0000,#000 40px);
          mask:linear-gradient(-90deg,#0000,#000 40px);
}

#container>* {
  border: solid 1px black;
  padding: 2px;
  margin-right: 4px;
}
    <section id="container">
  <section>2.43</section>
  <section>2.14</section>
  <section>2.17</section>
  <section>2.17</section>
  <section>2.14</section>
  <section>2.44</section>
  <section>2.14</section>
  <section>2.34</section>
  <section>2.35</section>
  <section>2.15</section>
  <section>3.10</section>
  <section>3.10</section>
  <section>3.10</section>
  <section>2.14</section>
  <section>2.14</section>
  <section>2.14</section>
  <section>2.34</section>
  <section>2.35</section>
  <section>2.15</section>
  <section>3.16</section>
  <section>1.10</section>
  <section>4.10</section>
</section>
    Login or Signup to reply.
  2. 0

    You can keep the overflow hidden and can add some extra styles to do what do you want.
    To gain this, you need to add position relative to the section and then use these css,

    #container {
  position: relative:
}

#container::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 100%;
  top: 0;
  right: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 1)
  );
  z-index: 2;
}

    This is the output I got
    Expected output

    For the whole thing, you can follow this Codepen link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search